Javascript 在引导3大分辨率折叠手风琴中禁用切换选项

引导折叠手风琴上的切换功能只能在较大分辨率下禁用吗

我们的目标是让手风琴在小分辨率上折叠，可以选择切换状态，在大分辨率上扩展，但不能选择切换状态。使用自举内置功能实现这一点的最佳方法是什么

我用现在的东西做了一个小提琴演示。我不擅长JS

JSFIDLE演示：

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>

$(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');
  }
});

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是劳里特酒后驾车，我是左舷还是右舷。整数turpis nisl，rhoncus sed hendrerit sit amet，再见nec eros。潜力悬钩子。南奎斯自由女神。前庭和直径，是封建的狮子座

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是劳里特酒后驾车，我是左舷还是右舷。整数turpis nisl，rhoncus sed hendrerit sit amet，再见nec eros。潜力悬钩子。南奎斯自由女神。前庭和直径，是封建的狮子座

JavaScript：

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

$(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');
  }
});

$（文档）.ready（函数（）{
如果（$（window.width（）=768）{
$（'.panel collapse'）.addClass（'in'）；
}
如果（$（window）.width（）这是可能的。您应该停止单击事件的传播：

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

我已经在JSFIDLE上更新了您的代码

但此代码将禁用折叠和打开面板的可能性（仅适用于较大分辨率，但无论如何）。
您可以在较大分辨率中隐藏链接，并显示一个裸标题，例如在面板标题中：

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


小组1
我的回答解决了问题吗？我用手风琴下面的一些内容更新了小提琴，如果你点击链接，你可以看到大分辨率上的跳跃，可以避免吗？谢谢，它工作得很好。致以最良好的问候！谢谢，在大分辨率上，如果我点击链接，它会向下滚动页面，可以避免吗？是的，当然。你应该这样做我只是防止这个事件的默认行为（我已经更新了JSFIDLE）。