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

编辑：添加了缺少的右括号。邋me我！

Answer 2

帕特里克的答案是正确的，但有一种更好的方法：使用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;
}

Jquery类更改工作，但不会影响它应该的另一个函数

3 个答案: