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

Question

您好，我在使用引导切换时遇到以下问题。

代码如下

（我复制了错误的 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

除了更新当前的more 元素外，您还需要将所有其他more 元素更新为+

var $mores = $('.more').click(function () {
    $(this).text(function (i, old) {
        return old == '+' ? '-' : '+';
    });
    //update all other more text to -
    $mores.not(this).text('+');
});

演示：Fiddle

Answer 2

试试：

$('.more').click(function(){
    var txt = $(this).text();
    if(txt == "+"){        
        $('.more').text("+");
        $(this).text("-");
    }
    else{
        $(this).text("+");
    }
});

DEMO here.

Answer 3

在我看来，您应该加入原生 Bootstrap 事件：

$('.dropdown').on({
    'show.bs.dropdown': function () {
        var l = $('.more', this).html('-')
        $('.more').not(l).html('+')
    },
    'hidden.bs.dropdown': function () {
        $('.more', this).html('+')
    }
});

FIDDLE