0

我刚开始使用 jQuery，真的只需要一些非常基本的东西。这是我正在尝试做的事情：

我将内容分为“.overview” div 和“.detail” div。jQuery 浏览所有“.detail”-div，向上移动一个元素 (.prev(".overview")) 并附加一个按钮。然后它将所有“.detail” div 缩小为零，并使用按钮分别显示/隐藏它们。

我首先对按钮进行了硬编码，但这似乎很乏味且没有必要。但是一旦我动态生成它们，显示/隐藏功能就不再起作用了。我四处搜索，但我可能没有使用正确的术语...

这是我的html：

<div class="title">
    <h2>Title</h2>
</div>
<div class="overview">
    <p>...</p>
</div>
<div class="detail">
        <p>...</p>
</div>

这是 jQuery 代码（在一个单独的文件中）：

$(document).ready(function() {

    $(".detail").each(function() {
        $(this).prev("div").append("<div class=\"expand\"><a href=#>more</a></div>");
        $.data(this, "realHeight", $(this).height());
    }).css({ overflow: "hidden", height: "0" });

    $(".expand").toggle(function() {
        $(this).html("<a href=#>less</a>")
        var div = $(this).next(".detail")
        div.animate({ height: div.data("realHeight")+21 }, 250);        
    }, function() {
        $(this).html("<a href=#>more</a>")
        $(this).next(".detail").animate({ height: 0 }, 250);
    });

});

如果您能指出正确的方向，我将不胜感激。或者，如果它是一个愚蠢的，只要告诉我我需要搜索什么。:-)

谢谢！

4

2 回答 2

1

您需要了解的技术是事件委托- 看看 jQuery 中的.on()和.delegate()函数，具体取决于您使用的版本。

然而，一般原则是，与其将事件处理程序绑定到单个元素（在执行 jQuery 代码时必须存在），不如将单个事件处理程序绑定到您知道将始终存在的元素（例如<body>标签）它运行一个依赖于选择器的函数。

当您单击按钮元素时，会为该元素触发 click 事件，然后使 DOM 冒泡，在向上遇到的每个元素都触发。当它到达您始终存在的元素（您的<body>元素）时，它会根据提供的选择器检查事件的原始目标，并且仅在匹配时执行代码。

于 2012-06-20T13:16:23.377 回答
0

$.next() 获取下一个兄弟，并且“.detail”不是 DOM 结构中“.expand”的兄弟。您可能想要获取父级（“.overview”），然后获取下一个（）。

或者改变结构，使它们成为兄弟姐妹。

编辑：在你的代码中你这样做，这就是为什么他们不是兄弟姐妹：

$(".detail").each(function() {
    $(this)
        .prev("div") // <- this gets the overview div
        .append("<div class=\"expand\"><a href=#>more</a></div>"); // <- this creates the "expand" as a child of the overview div (so not a sibling of details)

使用问题中的基本代码尝试使用“父”工作这个小提琴。

这是另一个使用insertBefore. 它的工作原理完全相同，您不需要.parent()调用。

于 2012-06-20T13:20:54.810 回答