Question

我遇到了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");

}
); });

我希望你能帮助我......

Answer 1

您正在将事件处理程序绑定到具有这些类的元素，就像执行绑定的代码运行时一样。该代码并没有神奇地重新运行以便以后重新绑定。

但是，你可以使用事件委托来获得类似于魔法的东西。变化：

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

到

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

并更改

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

到

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

（理想情况下，使用一个比document更接近按钮的容器。任何共同的祖先都会这样做。）

它的作用是将click绑定到祖先元素（在我的示例中为document），但是然后根据点击是否发起或通过匹配给定选择器的内容触发相关处理程序事件冒泡了。

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

Answer 2

当文档准备就绪时，DOM不包含名称为contentopen的类，因此无法绑定contentopen click事件。

使用toggleClass更改类后的jQuery事件

2 个答案: