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); });

当然，当您点击任何 .content时，这有明显的扩展和收缩所有 .expand区域的缺点（？）。

但是，如果您向.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。这类似于使用for上的label属性和表单元素。

其次，.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); 
});

如何从隐藏/显示的div中分离jQuery hide / show按钮？

3 个答案: