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

在我看来，你应该挂钩本机Bootstrap事件：

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

FIDDLE

Answer 2

在更新当前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 3

尝试：

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

DEMO here.

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

3 个答案: