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