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 {}), активная ручка ящика не меняет цвет (анимацию), как это должно быть. Это почему? Я использую PHP в Joomla 1.7

Спасибо!

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/