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

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

目标是让手风琴在小分辨率下折叠,可选择切换状态,并扩展大分辨率,无需切换状态.使用Bootstrap内置功能实现此目的的最佳方法是什么？

我用现在的东西做了一个小提琴演示.我对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,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');
  }
});

解决方法

那是可能的.你应该停止点击事件的传播：

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

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

但是这段代码将禁用折叠和打开面板的可能性(仅适用于更大的分辨率,但无论如何).

原文地址：https://www.jb51.cc/js/159424.html