我的全部展开/全部折叠功能有一个小问题。
这是我的 jsfiddel 链接:
假设展开 Name1 和 Name2 然后点击 Expand all 按钮, 它所做的是展开所有内容,但折叠 Name1 和 Name2。
我是否在我的 javascrit 函数中指定了 css id?
$(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");
}
});
});
最佳答案
您需要根据按钮的当前状态执行特定操作。一种方法是在按钮处于给定状态时将特定类分配给按钮。
注意:由于现有的组管理,当您组合使用展开/折叠所有按钮和单个控件时,状态似乎会混淆。
$(document).on('click', '.expandcollapse', function (e) {
// Perform specific action based on current state
if ($(this).hasClass('collapseAll')) {
$('.collapse').collapse('hide');
$(this).removeClass('collapseAll').html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
} else {
$('.collapse').collapse('show');
$(this).addClass('collapseAll').html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
}
});
要关闭组管理并查看其在该情况下如何正常工作,您可以通过删除所有元素上的 data-parent='#programs-accordion'
或将以下是您的 Javascript 的顶部:
$('.collapse').collapse({
toggle: false
});
DEMO - 无群组管理
关于javascript - 全部展开和全部折叠在所有情况下都不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15280454/