jQuery：隐藏“活动类”当鼠标未悬停时

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

此外，当我将“open”类应用于抽屉元素 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/