Отключить опцию переключения в 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');
  }
});
Источник

3 ответа

Решение

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

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

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

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

Источник

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

<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>
Источник

Начальная загрузка 4

Просто удалите data-parent="#accordion"из складных кузовных контейнеров. он не будет автоматически сворачиваться, когда вы откроете другой раздел после этого.

Источник
Другие вопросы по тегам