Javascript 引导折叠按钮如何防止出现两个折叠
我有一个这样的代码:Javascript 引导折叠按钮如何防止出现两个折叠,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个这样的代码: <a class="btn btn-primary" role="button" data-toggle="collapse" href="#about" aria-expanded="false" aria-controls="collapseExample">About</a> <a class="btn btn-primary" role="button" data-toggle="collapse"
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#about" aria-expanded="false" aria-controls="collapseExample">About</a>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#contact" aria-expanded="false" aria-controls="collapseExample">Contact</a>
<div class="collapse" id="about">
<div class="well">
about
</div>
</div>
<div class="collapse" id="contact">
<div class="well">
contact us
</div>
</div>
关于
联系我们
单击这两个按钮时,将显示两个折叠框。是否有一种方法一次只能显示一个折叠,比如说,如果我单击“关于”按钮,“联系人”折叠将在打开时关闭,如果我再次单击“联系人”按钮,“关于”折叠框将关闭
谢谢。我已经弄明白了,我所做的只是在head标签中添加了以下内容:
<script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script>
<<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
$("[data-collapse-group='myDivs']").click(function () {
var $this = $(this);
$("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () {
$($(this).data("target")).removeClass("in").addClass('collapse');
});
});
});//]]>
</script>
尝试添加一些jquery代码OK让我试试:)谢谢同样的结果,我相信data target=“#id”用于按钮,我忘了提到我正在使用链接,我已经有href=“#id”。您可以在每次单击按钮时触发一个jquery函数,该函数的代码为if($('yourElement').css('display')!='none'){$('yourElement').css('display','none')}。请尝试在每个按钮的单击事件上触发函数,点击下面的帖子:)