Question

$('.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 for that工作得很好，并且在展开时盒子会添加一个“active”类，并在崩溃时删除该类。

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

我的问题是，如果有人在点击全部展开或全部折叠之前已经展开了一两个框，则切换不会强制所有框展开或折叠，已展开或折叠的框执行与其他人相反。我想我需要查看“有效”类是否存在，如果是，请将expand扩展为all或从中删除所有切换不会使这些框不同步...

任何人都可以帮助我做这个逻辑吗？我想我很亲密......

谢谢！

Answer 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");
    }        
});

Answer 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; 
});

使用JQUERY有条件地切换类

2 个答案: