如何將jQuery隱藏/顯示按鈕與隱藏/顯示的div分開？

Question

我想在標題中使用可點擊的div，以在我的主要內容區域下方顯示一個div，但是我不知道該怎么做。 現在，我正在使用像這樣的基本jQuery：

    jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".expand").click(function()
    {
    jQuery(this).next(".content").slideToggle(500);
    });
});

和這樣的html：

<div class="expand">expand</div>
<div class="content">lorem ipsum</div>

但是如果我將兩個div分開，功能就會中斷。

如果您能引導我朝正確的方向前進，將不勝感激！

親切的問候

Answer 1

但是如果我將兩個div分開，功能就會中斷。

因為您使用的是next() ，它獲取$(this)旁邊的下一個元素。 無論.content在哪里，它都將起作用：

jQuery(document).ready(function () {
    var $content = jQuery(".content"); // Cache
    $content.hide();
    jQuery(".expand").click(function () {
        $content.slideToggle(500);
    });
});

Answer 2

您可以使用nextAll().first()代替next() 。

jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".expand").click(function() {
        jQuery(this).nextAll(".content").first().slideToggle(500);
    });
});

這樣，如果頁面上有多個.content ， .expand將僅擴展頁面上的下一個.content 。

Answer 3

您可以在這里做一些事情來提高性能和穩定性。 首先，您無需使用next()方法，而只需使用

$('.expand').click(function () { $('.content').slideToggle(500); });

當然，這有一個明顯的缺點（？），當您單擊任何 .expand時，會擴展和收縮所有 .content區域。

但是，如果在.expand和.content添加幾個html屬性，則可以提高性能和穩定性，如下所示：

<div class="expand" data-for="content_id">Click to toggle</div>
<div class="content" id="content_id">This is the toggable content</div>

首先，這需要data-屬性的jQuery最新版本（最好是1.6或更高版本）。 我使用data-for ，以表示一個特定的.expand適用於一個特定的.content 。 這類似於在label和form元素上使用for屬性。

其次， .content區域應用了一個新的（並且對每個人來說都是唯一的） id 。 這使jQuery選擇器可以通過getElementById()函數更快地定位這些項目。

最后，新的javascript如下所示：

$('.expand').click(function () {
    var id = '#' + $(this).data('for');
    $(id).slideToggle(500); 
});

並且，如果您需要手風琴功能（即，每當單擊一個內容時將所有.content匯總，並激活與所單擊的data-for相匹配的項目：

$('.expand').click(function () {
    var id = '#' + $(this).data('for');

    $('.content').slideUp(500);
    $(id).slideDown(500); 
});