javascript 从选项卡切换到折叠以响应

e4eetjau  于 2022-11-20  发布在  Java
关注(0)|答案(4)|浏览(187)

我们的目标是当站点宽度小于676 px时,从标签切换到折叠样式。我们使用的是Bootstrap。
我们将用css分别隐藏ul.nav-tabs和a. accordion-toggle。标签在这里可以工作,但是a.accordion-toggle不工作。有什么想法吗?

<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
  <li class="active"><a href="#panel1" data-toggle="tab">Panel 1</a></li>    
  <li class="active"><a href="#panel2" data-toggle="tab">Panel 2</a></li> 
</ul>

<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
  <div class="tab-pane collapse" id="panel1">
 Panel 1 Content
  </div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
  <div class="tab-pane collapse" id="panel2">
 Panel 2 Content
  </div>

<script>
  jQuery(document).ready(function ($) {
    if (document.documentElement.clientWidth <  767) {
        $('#myTab a').click(function (e) {
          e.preventDefault();
        }

        $(".collapse").collapse();
     }              
  });
</script>
zbdgwd5y

zbdgwd5y1#

在我的情况下,只是复制标签内容到隐藏的 accordion 工作得很好。
这里是我提取到小插件的源代码-Bootstrap Tab Collapse

evrscar2

evrscar22#

我在this jsfiddle上试了一下,但是让两个插件一起工作似乎很复杂
最好选择其中一个插件,只使用这个插件的类和JS,然后实现你自己的触发器来完成默认行为。
我认为折叠插件的折叠行为需要.accordion-group > .collapse.in结构才能正常工作--如果你不使用自己的JS的话。

q0qdq0h2

q0qdq0h23#

最后,我把标签触发器嵌套在一个带有标签内容的div中(而不是上面的列表),并使用css像全屏视图的标签一样定位它们。虽然不理想,但只要数据切换和数据目标在适当的位置就可以工作。

w1e3prcc

w1e3prcc4#

不确定是否有帮助,但你可以使用window.onresize = function(){}检查主容器的宽度。当它小于某个宽度时,你可以使用js替换内容。

相关问题