jQuery toggle DIV - сброс переключения при нажатии на элемент

#javascript #jquery #css #html

#javascript #jquery #css #HTML

Вопрос:

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

Я использую привязку меню для инициализации переключения. Когда появляется выдвижное меню, непрозрачность всей панели падает. Я хочу, чтобы пользователь просто щелкнул в любом месте на полной панели, чтобы отменить переключение и вернуться в исходное состояние.

JSFiddle: http://jsfiddle.net/q2tcE /

jQuery:

 $('.menu-nav').toggle(

function () {

    $('.full_panel').animate({
        width: "75%",
        opacity: 0.20
    }, 500);

    $('.aside-panel').animate({
        width: "25%"
    }, 500);

},

function () {

    $('.full_panel').animate({
        width: "100%",
        opacity: 1
    }, 500);

    $('.aside-panel').animate({
        width: "0%"
    }, 500);
});

HTML:

 <div class="header"></div>

<div class="full_panel">
    <a href="#" class="menu-nav">Menu</a>
</div>

<div class="aside-panel"></div>

<div class="clearfix"></div>

CSS:

 html, body{height: 100%; margin: 0; background:#2980b9 }

.header{background: #BADA55; padding: 20px; background: #2980b9}

.full_panel{
    background-color: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    float: left;
}

.aside-panel{
    background-color: rgba(0,0,0,0.7);
    width: 0%;
    height: 100%;
    float: left;
}

.clearfix{clear: both}

a{color: #CCC; text-decoration: none; }

Ответ №1:

Просто используйте две функции:

    function togglePanel() {
    $('.menu-nav').toggle(
    function () {
        $('.full_panel').animate({
            width: "75%",
            opacity: 0.20
        }, 500);
        $('.aside-panel').animate({
            width: "25%"
        }, 500);
    },
    function () {
        $('.full_panel').animate({
            width: "100%",
            opacity: 1
        }, 500);
        $('.aside-panel').animate({
            width: "0%"
        }, 500);
    });
}
function togglePanelReverse() {
    $('.full_panel').animate({
        width: "100%",
        opacity: 1
    }, 500);
    $('.aside-panel').animate({
        width: "0%"
    }, 500);
}
$('.full_panel').click(function () {
    togglePanelReverse();
});
togglePanel();

1. Это хорошее начало, спасибо! Единственная проблема заключается в том, что выдвижная панель не должна закрываться до тех пор, пока не будет нажата кнопка .full-panel . Если я нажму в любом месте экрана (в заголовке или на панели слайдов), он закроется. Он должен закрываться и сбрасываться ТОЛЬКО при нажатии на .full_panel

Ответ №2:

Вы должны добавить обработчик щелчка в div, который хотите переключить обратно:

 $('.menu-nav').toggle(function () {
  $('.full_panel').animate({
    width: "75%",
    opacity: 0.20
  }, 500);

  $('.aside-panel').animate({
    width: "25%"
  }, 500);

});

 $('.full_panel').click(function() {  
    $('.full_panel').animate({
        width: "100%",
        opacity: 1
    }, 500);
    $('.aside-panel').animate({
        width: "0%"
    }, 500);
});