如何将 jQuery 隐藏/显示按钮与隐藏/显示的 div 分开？答案

【问题标题】：How to separate jQuery hide/show button from the hidden/shown div?如何将 jQuery 隐藏/显示按钮与隐藏/显示的 div 分开？
【发布时间】：2012-02-21 00:15:03
【问题描述】：

我想在我的标题中使用一个可点击的 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 分开，函数就会中断。

如果你能带领我走向正确的方向，我将不胜感激！

亲切的问候

【问题讨论】：

标签： javascript jquery show-hide slidetoggle

【解决方案1】：

但如果我将两个 div 分开，函数就会中断。

因为您使用的是next()，它获取了$(this) 旁边的下一个元素。无论.content 在哪里，这都会起作用：

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

【讨论】：

【解决方案2】：

您可以在此处执行一些操作来提高性能和稳定性。首先，不要使用 next() 方法，而是使用

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

当然，这有一个明显的缺点 (?)，当您单击 any .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 和表单元素上使用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); 
});

【讨论】：

【解决方案3】：

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

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

这样，如果您的页面上有多个.content，.expand 只会在页面上展开下一个.content。

【讨论】：