我有下面的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/
我希望有帮助。