javascript - 展开和折叠元素以及从 JavaScript 中删除静态文本

Question

我有以下java脚本代码来展开和折叠。

$(function () {

   $(document).on('click', '.expandcollapse', function(e) {

     $('.collapse').each(function(index) {
       $(this).collapse("toggle");
     });

     if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All ") {
        $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
     }
     else {
        $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
     } 
    });
});

这里工作正常:

http://jsfiddle.net/HqXMN/10/

我需要删除静态文本(展开、折叠)并以某种方式将它们放入我的 html 中。 有没有办法使用toggleClass函数根据操作隐藏文本和图标加号或减号。

这是我迄今为止尝试过的方法，但根本不起作用。

$(function () {

   $(document).on('click', '.expandcollapse', function(e) {

     $(this).removeClass('icon-white icon-minus-sign');
     $('.collapse').each(function(index) {
       $(this).collapse("toggle");
     });

     if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i>") {
        $(this).removeClass('icon-white icon-plus-sign');
        $(this).addClass('icon-white icon-minus-sign');
        //$(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
     }
     else {
        $(this).addClass('icon-white icon-plus-sign');
        $(this).removeClass('icon-white icon-minus-sign');

     } 
    });
});

这是我的 html(我使用 haml 语法)

 %i.icon-white.icon-plus-sign
    Expand All
  %i.icon-white.icon-minus-sign
    Collapse All

更新:这是我尝试过但无法使其工作的更多内容。 http://jsfiddle.net/HqXMN/11/

Answer 1

首先，我建议你的 if 语句应该使用 jQuery .is() ( http://api.jquery.com/is/ )，这样你的代码会更加灵活。然后，我想 toggleClass 也适合你。我没有做太多事情，但这是一个开始:

JS:

$(function () {
    $(document).on('click', '.expandcollapse', function (e) {

        $('.collapse').each(function (index) {
            $(this).collapse("toggle");
        });

        if ($(this).is('.icon.white-icon .iconplus-sign')) {
            $(this).toggleClass('is-collapsed');
        } else {
            $(this).toggleClass('is-collapsed');

        }
    });
});

CSS:

.expandcollapse .icon-plus-sign {
    display:block;
}
.expandcollapse .icon-minus-sign {
    display:none;
}
.is-collapsed .icon-plus-sign {
    display:none;
}
.is-collapsed .icon-minus-sign {
    display:block;
}

此处演示:http://jsfiddle.net/pavloschris/HqXMN/13/

希望对您有所帮助。