从标签切换到合拢

目标是当网站宽度小于676px时，从标签切换到折叠式样折叠。我们正在使用Bootstrap。从标签切换到合拢

我们将用css分别隐藏ul.nav-tabs和a.accordtion-toggle。这些标签在这里工作，但a.accordion切换不起作用。有任何想法吗？

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

来源

2013-02-15 Laura

粘贴的代码已经失踪属性报价和JS没有做任何事情。 '.accordion-toggle [data-target]'之一也是不完整的。 – Sherbrow 2013-02-15 23:37:16

你有没有想过在'.nav-tabs'中使用折叠插件而不是tab插件？ – Sherbrow 2013-02-15 23:48:34

我尝试了一下this jsfiddle但它看起来很复杂，使这两个插件一起工作。

选择一个插件，只使用这个插件的类和JS，然后实现自己的触发器来完成默认行为可能会更好。

我觉得崩溃插件的手风琴行为需要.accordion-group > .collapse.in结构正常工作 - 如果你不使用你自己的JS。

来源

2013-02-15 23:46:03 Sherbrow

我结束了与标签内容（而不是上面的列表）嵌套在一个div内的标签触发器，并使用CSS来定位它们像全屏视图的标签。只要数据切换和数据目标到位，它就不是理想的工作。

来源

2013-02-19 19:07:35 Laura

不知道它是否有帮助，但可以使用window.onresize = function（）{}并检查主容器的宽度。当它小于某个宽度时，可以使用js替换内容。

来源

2013-03-22 11:33:44

这是违反bootstrap的设计。 Col size和@media在文档中是首选，因为它们可以在更多浏览器中更好地播放。 – GeorgeWL 2016-05-06 12:26:24

在我的情况下，只是将标签内容复制到隐藏的手风琴中效果很好。

这里是我提取到小插件源 - Bootstrap Tab Collapse

来源

2013-07-19 17:42:50 Okendoken

从标签切换到合拢

回答

相关问题