Jquery 类更改有效，但不会影响其他功能

Question

所以我的内容框会在您单击箭头时关闭和展开。内容框有两个类来判断它是打开还是关闭（.box_open、.box_closed）。为 box_open 分配了一个悬停功能，因此当它打开并且您将鼠标悬停在标题上时，会出现箭头。但是，我不希望在盒子关闭时发生这种情况，因为我希望箭头在盒子关闭时保持可见。当盒子关闭时，box_open 类被删除，但分配给该类的功能仍然有效。

这是两个函数的 jquery 代码。您还可以在下面的演示标题中看到它们。

    // Display Arrow on Box Header Hover

        $(".box_open").hover(
            function () {
                $(this).find('a').show();
            }, 
            function () {
                $(this).find('a').hide();
            }
        );

    // Open and Close Boxes:

        $(".box_header a").click(
            function () {
                $(this).parent().next('.box_border').stop().toggle();
                $(this).parent().toggleClass("box_open");
                $(this).parent().toggleClass("box_closed");
                return false;
            }
        );

谁能看看是什么问题？

这是演示网址：Demo Url

Answer 1

事件处理程序分配给元素，而不是类标签。因此，一旦分配，删除类名不会使处理程序消失。

您可以将事件分配给“box_header”并检查您的hover() 代码中是否存在“box_open”类。

$('.box_header').hover(
function() {
    $(this).find('a').show();
},
function() {
    if($(this).hasClass('box_open'))
        $(this).find('a').hide();
});

编辑：添加缺少的右括号。马虎我！

Answer 2

Patrick 的回答是正确的，但有一个更好的方法：使用 jQuery.live()，它可以让您“将处理程序附加到与当前选择器匹配的所有元素的事件，现在或将来。”

所以，这应该或多或少地得到你想要的：

$('.box_open').live('hover', function (event) {
    if(event.type === 'mouseenter') {
        $(this).find('a').show();
    }
    else {
        $(this).find('a').hide();
    }
});

几乎直接来自the jQuery docs。

Answer 3

把它放在你的css文件中。

.box_closed a {
    display: inline !important;
}