使用 JQUERY 的类的条件切换答案

【问题标题】：Conditional Toggle of Class using JQUERY使用 JQUERY 的类的条件切换
【发布时间】：2011-01-14 01:16:42
【问题描述】：

$('.showall').css("cursor","pointer").click(function() {

  $('.value-container').toggle();

  $('.dim-header').toggleClass($('.dim-header').toggleClass() == 'dim-header' ? 'dim-header active' : 'dim-header');

  $('.showall').html($('.showall').html() == '+ Expand All' ? '- Hide All' : '+ Expand All');

  return false;
});

我有一系列的盒子可以让用户随意展开和折叠。用于该功能的 JQUERY 效果很好，并且该框在展开时会添加一个“活动”类，并在折叠时删除该类。

我有一个链接可以触发上面的代码，它可以切换所有框以展开或折叠，并将标题图像从 + 切换到 -。

我的问题是，如果有人在单击全部展开或全部折叠之前已经展开了一两个框，则切换不会强制所有框展开或折叠，已经展开或折叠的框会执行与其他人相反。我想我需要检查是否存在“活动”类，如果存在，请添加全部扩展或全部删除，这样切换不会使框不同步...

谁能帮我解释一下这样做的逻辑？我想我很接近了...

谢谢！

【问题讨论】：

你能显示一些 HTML 吗？我有个更好的主意，但我需要先知道你的 HTML 是什么样子的

标签： javascript jquery

【解决方案1】：

var showText = '+ Expand All';
var hideText = '- Hide All';

$('.showall').css("cursor","pointer").click(function(e) {
    e.preventDefault();
    var show = $('.showall').html() == showText;
    $('.showall').html(show ? hideText : showText);

    if (show) {
        $('.value-container').show();
        $('.dim-header').addClass("active");
    }
    else {
        $('.value-container').hide();
        $('.dim-header').removeClass("active");
    }        
});

【讨论】：

正是我需要的...感谢您的澄清！

【解决方案2】：

试试这个：

$('.showall').css("cursor","pointer").click(function(){
    $('.value-container').toggle();    
        if($(this).html() == '+ Expand All'){
            $('.dim-header').addClass('active');
            $(this).html('- Hide All');
        }
        else{
            $('.dim-header').removeClass('active');
            $(this).html('+ Expand All');
        }
        return false; 
});

【讨论】：