在 Bootstrap 中禁用切换选项 3 在大分辨率下折叠手风琴

Question

Bootstrap 折叠手风琴的切换功能是否只能在较大的分辨率下禁用？

我们的目标是让手风琴在小分辨率下折叠并带有切换状态的选项，并在大分辨率下展开而没有切换状态的选项。使用 Bootstrap 内置功能实现此目的的最佳方法是什么？

我已经用我现在的东西制作了一个 Fiddle 演示。我不擅长 JS.

JSFiddle 演示：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');
  }
});

Answer 1

这是可能的。您应该停止点击事件的传播：

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

我已经在 jsFiddle 上更新了你的代码 http://jsfiddle.net/1crojp98/2/

但是此代码将禁用折叠和打开面板的可能性（仅适用于较大的分辨率，但无论如何）。

Answer 2

您可以在较大的分辨率下隐藏 link，并显示一个裸标题，例如在 panel-heading:

<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>

Answer 3

Bootstrap 4

只需从可折叠的 body 容器中移除 data-parent="#accordion"。在此之后打开另一个部分时，它不会自动折叠。

在 Bootstrap 中禁用切换选项 3 在大分辨率下折叠手风琴

Disable toggle option in Bootstrap 3 collapse accordion on large resolutions

javascript

twitter-bootstrap

twitter-bootstrap-3

accordion

collapse