jQuery.fn.areAll = function(arg) {
return this.get().every(function(e) {
return $(e).is(arg);
});
};
$(document).ready(function() {
function hidden_all() {
if ($('.hidden_1, .hidden_2, .hidden_3').areAll(':visible')) {
$(".togglehidden_all").removeClass("show").addClass("hide");
} else if ($('.hidden_1, .hidden_2, .hidden_3').areAll(':hidden')) {
$(".togglehidden_all").removeClass("hide").addClass("show");
}
}
$(".hidden_all").click(function() {
if ($(".hidden_1, .hidden_2, .hidden_3").areAll(":visible")) {
$(".togglehidden_all").removeClass("show").addClass("hide");
} else if ($(".hidden_1, .hidden_2, .hidden_3").areAll(":hidden")) {
$(".togglehidden_all").removeClass("hide").addClass("show");
}
});
$(".togglehidden_all").click(function() {
if ($(".hidden_1, .hidden_2, .hidden_3").areAll(":visible")) {
$(".hidden_1, .hidden_2, .hidden_3").slideUp("slow");
$(".togglehidden_1, .togglehidden_2, .togglehidden_3").removeClass("show").addClass("hide");
$(".togglehidden_all").removeClass("hide").addClass("show");
} else {
$(".hidden_1, .hidden_2, .hidden_3").slideDown("slow");
$(".togglehidden_1, .togglehidden_2, .togglehidden_3").removeClass("hide").addClass("show");
$(".togglehidden_all").removeClass("show").addClass("hide");
}
});
$(".togglehidden_1").click(function() {
if ($(".hidden_1").is(":visible")) {
$(".hidden_1").slideUp("slow");
$(".togglehidden_1").removeClass("show").addClass("hide");
hidden_all();
} else {
$(".hidden_1").slideDown("slow");
$(".togglehidden_1").removeClass("hide").addClass("show");
hidden_all();
}
});
$(".togglehidden_2").click(function() {
if ($(".hidden_2").is(":visible")) {
$(".hidden_2").slideUp("slow");
$(".togglehidden_2").removeClass("show").addClass("hide");
hidden_all();
} else {
$(".hidden_2").slideDown("slow");
$(".togglehidden_2").removeClass("hide").addClass("show");
hidden_all();
}
});
$(".togglehidden_3").click(function() {
if ($(".hidden_3").is(":visible")) {
$(".hidden_3").slideUp("slow");
$(".togglehidden_3").removeClass("show").addClass("hide");
hidden_all();
} else {
$(".hidden_3").slideDown("slow");
$(".togglehidden_3").removeClass("hide").addClass("show");
hidden_all();
}
});
});.show {
color: white;
background-color: green;
}
.hide {
color: white;
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="togglehidden_all">+/-</td>
</tr>
<tr>
<td class="togglehidden_1">1</td>
</tr>
<tr>
<td class="hidden_1">2</td>
</tr>
<tr>
<td class="togglehidden_2">3</td>
</tr>
<tr>
<td class="hidden_2">4</td>
</tr>
<tr>
<td class="togglehidden_3">5</td>
</tr>
<tr>
<td class="hidden_3">6</td>
</tr>
<tr>
<td class="hidden_all">hidden_all click function Test</td>
</tr>
</tbody>
</table>
注意：首先单击“+/-”为该示例提供初始类。
点击“+/-”显示/隐藏div 2,4和6 单击div1切换显示/隐藏div2 单击div3切换显示/隐藏div4 单击div3切换显示/隐藏div4
当div1，div2和div3全部逐个打开时，“+/-”更新为hide类（红色）。但是，当它们全部逐个关闭时，它不会更新到show class（绿色）。即它反向奇怪地反向工作
（如果我通过$（“。hidden_all”）手动运行该功能，它会正确更新。点击（function（）即点击“hidden_all click function Test”。这样我试着从其他功能中触发这个功能但它对这个问题没有影响。）
提前致谢。
答案 0 :(得分：0)
左边这个答案是IN的原始标记。
我发现你的代码有点忙，原谅我，所以我稍微改了一下。我还将动画放在一个函数中，以便更容易调用。
$(document).ready(function() {
var allthem = $('.hidden_1, .hidden_2, .hidden_3');
function hidden_all() {
$(".togglehidden_all")
.toggleClass("show", allthem.areAll(':visible'))
.toggleClass("hide", allthem.areAll(':hidden'));
}
jQuery.fn.areAll = function(arg) {
return this.get().every(function(e) {
return $(e).is(arg);
});
};
jQuery.fn.slideToggleBool = function(bool, options) {
return bool ? $(this).slideDown(options, hidden_all) : $(this).slideUp(options, hidden_all);
};
$(".hidden_all").click(function() {
hidden_all();
});
$(".togglehidden_all").click(function() {
var isall = allthem.areAll(":visible");
allthem.slideToggleBool(!isall, "slow");
$(".togglehidden_1, .togglehidden_2, .togglehidden_3")
.toggleClass("show", isall)
.toggleClass("hide", !isall);
});
$(".togglehidden_1, .togglehidden_2, .togglehidden_3").on('click', function() {
// to keep ref inside the done where "this" is the animating one
var me = $(this);
$(this).closest('tr').next('tr').find('td').promise().done(function() {
// will be called when all the animations on the queue finish
var isVis = $(this).is(":visible");
me.closest('tr').next().slideToggleBool(!isVis, "slow");
me.toggleClass("show", !isVis).toggleClass("hide", isVis);
});
});
});
我还进一步重新设计了最后3个函数，以便从单击的元素中找到相对定位的元素。请注意，如果您快速单击元素（单个），它们也会出现切换问题，即未完成的动画。这也应该解决最后一个函数中的问题。
我做了最低限度的测试以检查其他问题。
答案 1 :(得分：0)
这是我的工作代码。
如果你能够简化那就太棒了。理想情况下，我希望子切换打开/关闭子切换之间的所有行。还有一些计数器可以使用任意数量的子切换来翻转主切换，如果子切换的百分比是隐藏的或可见的。
由于
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery.fn.areAll = function(arg) {
return this.get().every(function(e) {
return $(e).is(arg);
});
};
$(document).ready(function(){
var $allhidden = $(".hidden_1, .hidden_2, .hidden_3");
var $subtoggles = $(".togglehidden_1, .togglehidden_2, .togglehidden_3");
function hidden_all(){
if ($allhidden.areAll(":visible")){
$(".togglehidden_all").removeClass("show").addClass("hide");}
else {
$(".togglehidden_all").removeClass("hide").addClass("show");}
}
$(".togglehidden_all").click(function(){
if ($allhidden.areAll(":visible")){
$allhidden.slideUp("slow");
$subtoggles.removeClass("hide").addClass("show");
$(".togglehidden_all").removeClass("hide").addClass("show");}
else {
$allhidden.slideDown("slow");
$subtoggles.removeClass("show").addClass("hide");
$(".togglehidden_all").removeClass("show").addClass("hide");}
});
$(".togglehidden_1").click(function(){
if ($(".hidden_1").is(":visible"))
{ $(".hidden_1").slideUp("slow", function(){
$(".togglehidden_1").removeClass("hide").addClass("show");
hidden_all();})}
else { $(".hidden_1").slideDown("slow", function(){
$(".togglehidden_1").removeClass("show").addClass("hide");
hidden_all();})}
});
$(".togglehidden_2").click(function(){
if ($(".hidden_2").is(":visible"))
{ $(".hidden_2").slideUp("slow", function(){
$(".togglehidden_2").removeClass("hide").addClass("show");
hidden_all();})}
else { $(".hidden_2").slideDown("slow", function(){
$(".togglehidden_2").removeClass("show").addClass("hide");
hidden_all();})}
});
$(".togglehidden_3").click(function(){
if ($(".hidden_3").is(":visible"))
{ $(".hidden_3").slideUp("slow", function(){
$(".togglehidden_3").removeClass("hide").addClass("show");
hidden_all();})}
else { $(".hidden_3").slideDown("slow", function(){
$(".togglehidden_3").removeClass("show").addClass("hide");
hidden_all();})}
});
});
</script>
<style>
.show {
color: white;
background-color: green;
}
.hide {
color: white;
background-color: red;
}
.starthidden {
display: none;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="togglehidden_all show">+/-</td>
</tr>
<tr>
<td class="togglehidden_1 show">1</td>
</tr>
<tr>
<td class="hidden_1 starthidden">2</td>
</tr>
<tr>
<td class="togglehidden_2 show">3</td>
</tr>
<tr>
<td class="hidden_2 starthidden">4</td>
</tr>
<tr>
<td class="togglehidden_3 show">5</td>
</tr>
<tr>
<td class="hidden_3 starthidden">6</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 2 :(得分：0)
我看到你修改了你的结构，可以/不反对更改标记。考虑到这一点，我设置了一些类并使用它们来简化代码。我还允许在“show”，“hide”的切换按钮上使用类的初始“状态”。
只需添加一个新的行对，就可以添加一个新的“群组”切换，没有特殊的“类”，因此无需修改代码。
在行动中看到它的小提琴：https://jsfiddle.net/MarkSchultheiss/ud99cf0u/5/
修订标记：
<table>
<tbody>
<tr>
<td class="togglehidden_all">+/-</td>
</tr>
<tr>
<td class="show toggle-hide">1</td>
</tr>
<tr>
<td class="hideme">2</td>
</tr>
<tr>
<td class="toggle-hide">3</td>
</tr>
<tr>
<td class="hideme">4</td>
</tr>
<tr>
<td class="show toggle-hide">5</td>
</tr>
<tr>
<td class="hideme">6</td>
</tr>
</tbody>
</table>
修改后的代码，注意它有一些初始的“状态”设置，允许任何标记/可见性，并让它驱动初始可见性和类状态。这是这段代码的一小部分。最后两个执行所有“活动”工作/事件处理。
$(document).ready(function() {
// simple extenders to use
jQuery.fn.areAll = function(arg) {
return this.filter(arg).length === this.length;
};
jQuery.fn.slideToggleBool = function(bool, options) {
return (bool ? $(this).slideDown(options) : $(this).slideUp(options));
};
// cache these for use
var allthem = $('.hideme');
var allToggles = $('.toggle-hide');
// set initial state of toggles and associated element, respects classes present
allToggles.each(function() {
var isShow = $(this).hasClass("show");
if (isShow) {
$(this).parents('tr').next().find('td.hideme').hide();
} else {
$(this).toggleClass("hide", !isShow);
}
});
// used to set the "all" +/- button state
function hidden_all() {
var areVis = allthem.areAll(':visible');
var allHidden = allToggles.filter(":hidden").length == allToggles.length;
$(".togglehidden_all")
.toggleClass("show", !allHidden)
.toggleClass("hide", areVis && !allHidden);
return !areVis;
}
// set initial "+/-" button color
hidden_all();
// these two do all the work
$(".togglehidden_all").on('click', function() {
var vis = hidden_all();
$(this).toggleClass("show", !vis).toggleClass("hide", vis);
allthem.slideToggleBool(vis, "slow");
allToggles
.toggleClass("show", !vis)
.toggleClass("hide", vis);
});
$(".toggle-hide").on('click', function() {
var myTarget = $(this).parents('tr').next().find('td.hideme');
var isVis = myTarget.is(":visible");
myTarget.slideToggleBool(!isVis, "slow");
$(this).toggleClass("show", isVis).toggleClass("hide", !isVis);
});
});