jQuery:当鼠标未悬停时隐藏 'active class'

Question

我有以下 jQuery 插件:http://jqueryfordesigners.com/slide-out-and-drawer-effect/

现在的问题是:当鼠标不在元素上时，我想关闭事件的“抽屉”。 jQuery 设置为保持事件状态打开，直到将鼠标悬停应用于另一个抽屉元素。如何在未将鼠标悬停在任何抽屉上时关闭所有抽屉？

初始化代码:

$(function () {
    $('UL.drawers').accordion({
        // the drawer handle
        header: 'H2.drawer-handle',

        // our selected class
        selectedClass: 'open',

        // match the Apple slide out effect
        event: 'mouseover'
    });
});

此外，当我将“打开”类应用于抽屉元素 css (.drawer-handle.open {}) 时，事件抽屉句柄不会改变颜色(动画)，因为它应该。这是为什么？我在 Joomla 1.7 中使用 PHP

谢谢!

Answer 1

这里是为您提供的部分解决方案:

$(function() {
    var $accordian = $('UL.drawers').accordion({
        // the drawer handle
        header: 'H2.drawer-handle',

        // our selected class
        selectedClass: 'open',

        // match the Apple slide out effect
        event: 'mouseover',

        // allow all drawers to be closed (default is "true" - always keep a draw open)
        alwaysOpen: false
    }).activate(false);

    $('UL.drawers').mouseout(function () {
        // close all the drawers when the mouse leaves the parent list
        $accordian.activate(false);
    });
});

我说部分是因为此设置的行为并不像我认为的那样顺利，但如果结果接近您正在寻找的结果，它应该会让您朝着正确的方向开始。

您可以通过这个 jsFiddle 查看它的运行情况:http://jsfiddle.net/gKNGh/1/