jQuery切換/滑動重置鏈接

我爲網站上的某些文本製作了切換腳本。我有大約10個「頭」鏈接和兩個h3鏈接。基本上，如果你點擊一個頭鏈接，它會打開並關閉，再次點擊它。如果你點擊h3，所有人都打開。如果已經打開，它會保持打開狀態。一個問題是，如果你全部打開它們，然後關閉並打開一個，然後嘗試關閉它們，你必須點擊h3兩次。這是因爲當它們自己打開時，它給出了一個active1類，當它們一起打開時，它會給出一個active類。因此，當我第一次打開h3時，它將active1變爲活動狀態（這是爲了在只有一個打開並且想要打開它們的情況下它們都可以關閉或打開），然後第二次它最終關閉所有活動。希望這是有道理的。jQuery切換/滑動重置鏈接

這裏是JFiddle。

$(".topics").hide();

來源

2012-11-21 user1842315

這是你後的那種功能：http://jsfiddle.net/Ry6Nr/8/？

$(document).ready(function(){  
    $(".topics").hide();   
    $(".head").click(function(){ 
     $(this).toggleClass("active").next().slideToggle(); 
    }); 
});

的toggleClass和slideToggle功能做什麼，我認爲你正在試圖做的。

來源

2012-11-21 15:18:24 mibbler

爲什麼你需要使用2類，當你只能使用一個？只是要告訴你哪些是開放的或不開放的。

$("h3").click(function() { 
    var $div = $(this).siblings('.head'); // cache the relative divs 
    var len = $div.filter('.active').length; // get how many are active 
    var $topic = $(".topics", $(this).parent()); // topics relative to element 
    if (len == $div.length) { // if all are active 
     $div.removeClass('active'); // remove class active 
     $topic.slideUp(350); // slideup 
    } else { 
     $div.addClass('active'); // else add active to all 
     $topic.slideDown(350) // slide down 
    } 
}); 

$(".head").click(function() { 
    var $el = $(this); // cache this 
    if ($el.hasClass("active")) { 
     $el.removeClass("active").next().slideUp(350); 
    } else { 
     $el.addClass("active").next().slideDown(350); 
    }; 
});

http://jsfiddle.net/pmsJa/

來源

2012-11-21 15:19:18

真棒太感謝你了！我對jQuery非常陌生。有時我會讓事情知道有更簡單的方法，但我只是不知道要做到這一點。非常感謝 – user1842315

@ user1842315不客氣:)希望這是你正在尋找的..也檢查綠色複選標記，如果這回答了你的問題 –

見this更新的jsfiddle。

原始代碼：

if($(".head").hasClass("active1")){ 
    $(".head").removeClass("active1").addClass("active").next().slideDown(350); 
     } else

Upadted代碼：

$("h3").click(function(){ 
    if($(".head").hasClass("active1")){ 
    $(".head").removeClass("active1").next().slideUp(350); 
     }

來源

2012-11-21 15:26:41

jQuery切換/滑動重置鏈接

回答

相關問題