首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带有折叠BootStrap的菜单

带有折叠BootStrap的菜单
EN

Stack Overflow用户
提问于 2013-09-18 16:13:53
回答 1查看 305关注 0票数 0

你好,我在BootStrap里有一个按钮。我在菜单中使用“折叠”,当我按下这些按钮来折叠时,每个按钮都会出现任何问题。

但当我按下另一个按钮时,这个活动就会出现在另一个按钮上。

如何改变这一行动?当我按下任何按钮,这隐藏了这个,但用相同的动画,如崩溃,做它。

这是代码,当你尝试它时,你会明白我的意思:

代码语言:javascript
运行
复制
<ul class="nav nav-pills">
   <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content0a">1<strong class="caret"></strong></a></li>
   <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content1a">2<strong class="caret"></strong></a></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
    <div class="thumbnail bs-example bullet0a">
        <div class="media">
            <div class="">
                <ul><li> Content...1 </li></ul>
            </div>
        </div>
    </div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
    <div class="thumbnail bs-example bullet0a">
        <div class="media">
            <div class="">
                <ul><li> Content...2 </li></ul>
            </div>
        </div>
    </div>
</div>
</div>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-09-18 20:14:37

尝尝这个。

代码语言:javascript
运行
复制
   <script>
       $(document).ready(function(){
           $('.nav-pills a').click(function(){
               $('.in').not($(this).data('target')).height(0);
               $('.in').not($(this).data('target')).removeClass('in');
           });
       });
   </script>

你也可以试试这个。(这提供了更多的折叠动画)

代码语言:javascript
运行
复制
<script>
    $(document).ready(function(){
        $('.nav-pills a').click(function(){
            $('.in').not($(this).data('target')).collapse('hide');
        });
    });
</script>

您可以在</body>标记之前将其添加到页面底部,也可以将其添加到现有的javascript文件中。

试试,如果它接近你想要的,请告诉我。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18877274

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档