Отключить параметр переключения в Bootstrap 3 свернуть аккордеон на больших разрешениях

Можно ли отключить функцию переключения на аккордеоне свертывания Bootstrap только при больших разрешениях?

Цель состоит в том, чтобы аккордеон сворачивался на малых разрешениях с возможностью переключения состояний и расширялся на больших разрешениях без возможности переключения состояний. Как лучше всего использовать встроенные функции Bootstrap для достижения этой цели?

Я сделал демонстрацию Fiddle с тем, что у меня есть сейчас. Я не силен в JS.

JSFiddle DEMO: http://jsfiddle.net/1crojp98/1/

HTML:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default col-sm-6">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title text-center">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Panel 1
            </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p>
            </div>
        </div>
    </div>

    <div class="panel panel-default col-sm-6">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title text-center">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Panel 2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p>
            </div>
        </div>
    </div>

</div>

JavaScript:

$(document).ready(function(){
  if ($(window).width() <= 768){  
    $('.panel-collapse').removeClass('in');
  }
});

$(window).resize(function(){
  if ($(window).width() >= 768){  
    $('.panel-collapse').addClass('in');
  }
  if ($(window).width() <= 768){  
    $('.panel-collapse').removeClass('in');
  }
});

javascript collapse accordion twitter-bootstrap twitter-bootstrap-3
person imag    schedule 23.01.2015    source источник
comment
Мой ответ решил проблему?   -  person Alex Todef    schedule 23.01.2015
comment
Я обновил скрипку некоторым контентом под аккордеоном, и вы можете увидеть скачок на больших разрешениях, если щелкнете по ссылке, можно ли этого избежать. jsfiddle.net/1crojp98/3   -  person imag    schedule 24.01.2015
comment
Спасибо, работает отлично. С уважением!   -  person imag    schedule 27.01.2015

Ответы (2)


arrow_upward
14
arrow_downward

Это возможно. Вы должны просто остановить распространение события клика:

$('a[data-toggle="collapse"]').click(function(e){
  if ($(window).width() >= 768) {  
    e.stopPropagation();
  }    
});

Я обновил ваш код на jsFiddle http://jsfiddle.net/1crojp98/2/

Но этот код отключит возможность как свернуть, так и открыть панели (только для больших разрешений, но все же).

person Alex Todef    schedule 23.01.2015
comment
Спасибо, в большом разрешении, если я нажму на ссылку, она прокрутит страницу вниз, можно ли этого избежать? - person imag; 24.01.2015
comment
Да, конечно. Вы должны просто предотвратить поведение этого события по умолчанию (я обновил jsFiddle jsfiddle.net/1crojp98/4). - person Alex Todef; 26.01.2015

arrow_upward
2
arrow_downward

Вы можете просто скрыть ссылку в больших разрешениях и вместо этого показать голый заголовок, например. в заголовке панели:

<h4 class="panel-title text-center">
  <a class="hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    Panel 1
  </a>
  <div class="hidden-xs">
    Panel 1
  </div>
</h4>
person Rolleric    schedule 27.02.2016