Question

你好，我在BootStrap中有一个按钮。我在菜单中使用“折叠”，当我按此按钮折叠时，每个按钮都会显示任何问题。

但当我按下另一个按钮时，另一个按钮显示在另一个按钮上。

如何改变这个动作？当我按下任何按钮时，这隐藏了这个，但是像崩溃一样使用相同的动画。

这是代码，当你尝试它时，你会理解我：

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

Answer 1

试试这个。

   <script>
       $(document).ready(function(){
           $('.nav-pills a').click(function(){
               $('.in').not($(this).data('target')).height(0);
               $('.in').not($(this).data('target')).removeClass('in');
           });
       });
   </script>

您也可以试试这个。（它提供了更多的崩溃动画）

<script>
    $(document).ready(function(){
        $('.nav-pills a').click(function(){
            $('.in').not($(this).data('target')).collapse('hide');
        });
    });
</script>

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

尝试一下，让我知道它是否接近你想要的东西。

折叠BootStrap的菜单

1 个答案: