使用JQUERY的有条件切换类

$('.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的工作效果很好，并且该框在扩展时添加了一个“主动”类，并且在崩溃后删除该类。使用JQUERY的有条件切换类

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

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

Can任何人都可以用逻辑来帮助我做到这一点？我觉得我很接近...

谢谢！

来源

2011-01-13 Brian

你能表现出一定的HTML？我有一个更好的主意，但我需要知道你的HTML看起来像第一个 – hunter 2011-01-13 17:14:04

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

来源

2011-01-13 17:09:21 hunter

正是我需要的......谢谢你的清晰！ – Brian 2011-01-13 19:17:07

试试这个：

$('.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; 
});

来源

2011-01-13 17:10:02 Chandu

使用JQUERY的有条件切换类

回答

相关问题