你好,我在 BootStrap 中有一个按钮。我在菜单中使用“折叠”,当我按下它以折叠它时,每个按钮都会出现任何问题。
但是当我按下另一个按钮时,这个事件会出现在另一个按钮上。
如何改变这个 Action ?当我按下任何按钮时,这会隐藏它,但会使用与折叠相同的动画。
这是代码,当你尝试它时你会明白我的意思:
<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>
最佳答案
试试这个。
<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 文件中。
尝试一下,如果它接近您想要的,请告诉我。
关于javascript - 带折叠 BootStrap 的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18877274/