使用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的有條件切換類

回答

相關問題