jQuery slideToggle一次一個div而不是全部獨立

我使用下面的切換div的函數，並且使用它，任何一個入口內容div都可以獨立於所有入口內容div打開或關閉。jQuery slideToggle一次一個div而不是全部獨立

如果只有一個入口內容div會隨時打開，那將會是一件好事。點擊一個關閉的入口標題div將關閉任何其他入口內容div，然後打開一個點擊。我需要留下html標記，因爲它是由Wordpress動態創建的。這可能嗎？

功能：

jQuery(document).ready(function($) { 
$(".entry-content").hide('slow'); 
$(".entry-title").click(function() { 
$(this).parent().children(".entry-content").slideToggle(500); }); 
});

HTML

<div class="entry-post"> 

    <h2 class="entry-title">Post Title 1</h2> 

    <div class="entry-content">Lorem Ipsum... 

</div></div> 

    <h2 class="entry-title">Post Title 2</h2> 

    <div class="entry-content">Lorem Ipsum... 

</div></div> 

More of the same.... 

</div>

來源

2011-04-29 markratledge

就全部關閉再次每次一個點：

jQuery(document).ready(function($) { 
$(".entry-content").hide('slow'); 
$(".entry-title").click(function() { 
    $(".entry-content").hide(); 
$(this).parent().children(".entry-content").slideToggle(500); }); 
});

例子：http://jsfiddle.net/auUxk/

來源

2011-04-29 03:20:01 Derek

謝謝！很棒。 – markratledge 2011-04-29 13:46:18

但是如果你切換已經打開的一個，它會顯示div而不是隱藏它，因爲你之前隱藏它。 – Marc 2013-05-22 15:26:45

非常感謝。清晰簡潔！ – HollerTrain 2017-08-17 14:51:23

是的，你可以用這樣的邏輯：

$(".entry-title").click(function() { 
    // hide all entry title elements 
    $('.entry-title').hide(); 
    // show the clicked one 
    $(this).show(); 
});

您可以調整它來切換，而不是使用隱藏/顯示。

我通常通過給元素分配特殊的css類來完成這種邏輯（它更好地分離事物）。所以當我點擊元素時，我添加了一個類。但是，當你點擊另一個元素時，你必須使用該類的元素，但只需要一個元素。所以你必須修改它。首先從它的所有元素中刪除該類，然後將其添加到單擊的元素。

$(".anyAffectedElement").click(function() { 
    // remove any instances of special class 
    $('.enabledElement').removeClass('eneabledElement'); 
    // add special class to clicked element 
    $(this).addClass('enabledElement'); 
});

^這只是一個通用的邏輯，你如何處理這樣的事情。在簡單的情況下，這個'enabledElement'類只是增加了一些特殊的樣式（如高亮）。

來源

2011-04-29 03:20:28 Damb

感謝您的解釋;我最終以下面的答案去做切換動作。 – markratledge 2011-04-29 13:45:46

我不明白這是別人給的那些例子，但最後我發現在另一個地方的答案，如果有人需要一個解決方案simplier（或不同）：http://jsfiddle.net/bipen/zBdFQ/1/

@markratledge - 首先你需要給你的div代碼，而不是類...

$("#link1").click(function(e) { 
    e.preventDefault(); 
    $("#div1").slideDown(slow); 
    $("#div2").slideUp(slow); 
}); 

$("#link2").click(function(e) { 
    e.preventDefault(); 
    $("#div1").slideUp(slow); 
    $("#div2").slideDown(slow); 
});

來源

2013-09-17 23:08:16

jQuery slideToggle一次一個div而不是全部獨立

回答

相關問題