您好,我在使用 Bootstrap 切换时遇到以下问题。
代码如下
(我复制了错误的 HTML 代码部分,所以我编辑了问题,这是应用于切换的实际代码)
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title active">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Electronics <span class="more">+</span></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Item 1</a> (2)</li>
<li><a href="#">Item 2</a> (1)</li>
<li><a href="#">Item 3</a> (3)</li>
</ul>
</div>
</div>
</div><!-- panel 1-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Cartridges <span class="more">+</span></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Item 1</a> (2)</li>
<li><a href="#">Item 2</a> (1)</li>
<li><a href="#">Item 3</a> (3)</li>
</ul>
</div>
</div>
</div><!-- panel 2-->
</div><!-- panel group -->
这就是我用来替换文本的内容
$('.more').click(function(){
$(this).text(function(i,old){
return old=='+' ? '-' : '+';
});
});
所以我想在单击元素时将 div class=more 的文本更改为减号 (-)
在这个线程上我找到了答案 Twitter bootstrap collapse: change display of toggle button
然而,由于我有多个元素,当我点击其中一个时,符号会变为 (-),这可以完美地工作,但如果我点击另一个“元素”,第一个会崩溃,但符号仍然是 (-)更改为 (+)
我该怎么做?我知道这是一个简单的问题,也许是一个简单的答案,但我有点被困在这里。
谢谢你的帮助
最佳答案
在我看来,您应该 Hook 到 native Bootstrap 事件:
$('.dropdown').on({
'show.bs.dropdown': function () {
var l = $('.more', this).html('-')
$('.more').not(l).html('+')
},
'hidden.bs.dropdown': function () {
$('.more', this).html('+')
}
});
关于javascript - Bootstrap 切换多个元素上的文本更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20380387/