javascript - Bootstrap 切换多个元素上的文本更改

Question

您好，我在使用 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

然而，由于我有多个元素，当我点击其中一个时，符号会变为 (-)，这可以完美地工作，但如果我点击另一个“元素”，第一个会崩溃，但符号仍然是 (-)更改为 (+)

我该怎么做？我知道这是一个简单的问题，也许是一个简单的答案，但我有点被困在这里。

谢谢你的帮助

Answer 1

在我看来，您应该 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('+')
    }
});

FIDDLE