展开和折叠一个项目，并从javascript中删除静态文本

expand and collapse an item and remove static text from javascript

本文关键字：javascript 并从 删除 文本 静态 项目 一个 折叠      更新时间：2023-09-26

我有下面的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/

首先，我建议您应该使用jQuery .is() (http://api.jquery.com/is/)为您的if语句，这样您的代码将更加灵活。那么，我想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/

相关文章：