3

我对 jQuery 和 toggleClass() 有疑问。我想创建一个 div，它在单击按钮时关闭。按钮更改，当我再次单击此按钮时，div 将再次打开。

问题是：当我单击按钮时，div 会关闭并且按钮的类会发生变化——这很好。但是现在当我单击带有新类的按钮时 - 没有任何反应。

这是我的代码：

<div class="content">
        <div class="contentclose"></div>
        <p>Text here</p>
    </div>

和 jQuery：

$( document ).ready(function() {
$(".contentclose").click(
    function() {
        $(".content").animate({
            "height": "45px",
            "width": "45px",
            "padding": "0px"
        }, 1000);
        $(".content").children("p").animate({
            "opacity": "0"
        }, 1000);

        $(".contentclose").toggleClass("contentclose contentopen");

}
);

$(".contentopen").click(
    function() {
        $(".content").animate({
            "height": "400px",
            "width": "200px",
            "padding": "50px"
        }, 1000);
        $(".content").children("p").animate({
            "opacity": "1"
        }, 1000);

        $(".contentopen").toggleClass("contentopen contentclose");

}
); });

我希望你能帮帮我...

4

2 回答 2

6

在执行绑定的代码运行时，您将事件处理程序绑定到具有这些类的元素。该代码不会神奇地重新运行以稍后重新绑定。

不过，您可以使用事件委托来获得类似魔法的东西。改变：

$(".contentclose").click(function...

到

$(document).on("click", ".contentclose", function...

和改变

$(".contentopen").click(function...

到

$(document).on("click", ".contentopen", function...

（理想情况下，使用比 更靠近按钮的容器document。任何共同的祖先都可以。）

这样做是绑定click到祖先元素（document在我的示例中），然后根据点击是源自还是通过与给定选择器匹配的事件在事件冒泡时触发相关处理程序。

因此，如果点击document从（或通过）.contentclose按钮冒泡，我们在该行中附加的处理程序就会运行。但如果它从（或通过）.contentclose按钮冒泡，则运行另一个处理程序。它是在单击发生时动态确定的，而不是在您连接处理程序时静态确定的。

于 2013-05-14T15:41:59.200 回答
0

当文档准备好时，DOM 中不包含名为 contentopen 的类，因此无法绑定 contentopen 点击事件。

于 2013-05-14T15:42:27.847 回答