JQuery Panels - закрытие одного DIV, а потом открытие другого! - PullRequest
Новая
       22

JQuery Panels - закрытие одного DIV, а потом открытие другого!

4 голосов
/ 08 июля 2011

У меня есть следующий код.

Мне интересно, есть ли способ определить, включена ли панель, и если да, автоматически отключить ее, прежде чем включить другую?Это обнаружение должно происходить, когда пользователь нажимает кнопки.

Я пытался добавить функцию «скрыть» в каждую функцию панели, но она не работала должным образом.Это мой текущий код: 

    $(function() {
    $("#panel-2-button").click(function() {
        $("#content-inner-panel-2").toggle("slide", { direction: "left" }, 1000); 
    });
    $("#panel-2-button-medium").click(function() {
        $("#content-inner-panel-2-medium").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-button-large").click(function() {
        $("#content-inner-panel-2-large").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button").click(function() {
        $("#content-inner-panel-3").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button-medium").click(function() {
        $("#content-inner-panel-3-medium").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button-large").click(function() {
        $("#content-inner-panel-3-large").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close").click(function() {
        $("#content-inner-panel-2").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close-medium").click(function() {
        $("#content-inner-panel-2-medium").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close-large").click(function() {
        $("#content-inner-panel-2-large").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close").click(function() {
        $("#content-inner-panel-3").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close-medium").click(function() {
        $("#content-inner-panel-3-medium").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close-large").click(function() {
        $("#content-inner-panel-3-large").hide("slide", { direction: "left" }, 1000);
    });
});

Надеюсь, кто-то может помочь.Zach

Ответы [ 5 ]

3 голосов
/ 11 июля 2011

Самый простой способ:

Назначить класс всем панелям (например, .togglepanels);

OnClick, сначала скройте все .togglepanels, как это:

$(".togglepanel").hide("slide", { direction: "left" }, 1000);

затем откройте тот, который вы хотите открыть.

0 голосов
/ 18 июля 2011

Если я правильно прочитал ваш вопрос, вы сказали автоматически отключить его, прежде чем включить другой?

Из документации JQuery: 

.hide( [duration,] [easing,] [callback] )
.hide( [duration,] [callback] )

Обратный вызов вызывается после завершения анимации. Поэтому после того, как вы спрятали элемент, вы можете запустить .toggle внутри функции обратного вызова. Затем он переключит другой div, открыв его после закрытия другого (и не закрывая и не открывая одновременно).

0 голосов
/ 16 июля 2011

Вы можете привязать обработчик mousedownoutside к каждому div и спрятать там все остальные. Вам нужен этот плагин jquery , чтобы включить внешние события.

0 голосов
/ 15 июля 2011

Вам нужно сделать это в два этапа, дать класс panel для всех ваших панелей. Затем используйте следующий код: 

$(document).ready(function(){
    $('.panel').hide("slide", { direction: "left" }, 1000);
});

$('.panel').live('click',function(){
    $('.open-panel').hide("slide", { direction: "left" }, 1000);
    $(this).addClass('.open-panel').toggle("slide", { direction: "left" }, 1000);
});

Этот код будет 1. закрыть всю панель при загрузке страницы 2. закройте все открытые панели, когда открыта любая другая панель

0 голосов
/ 08 июля 2011

лучший способ сделать это: отключить все деления , прежде чем что-то включить. Создайте для этого отдельную функцию (ToggleAllOff).

...