我是JS的新手,我无法弄清楚如何让它工作.很感谢任何形式的帮助!所以我有一个汉堡包按钮,当点击时,通过向面板和按钮添加一个类,同时切换滑入式面板和汉堡包动画的动画.如果用户点击面板外的任何地方,我已成功添加了一个点击事件来关闭面板,但我也无法获得汉堡包按钮来删除添加的类.我希望用户同时拥有这两个选项(单击按钮或单击面板外部).
HTML:
<ul class="nav nav--right">
<li class="v-button--slide-right" id="toggle-menu">
<button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
<span class="toggle"></span>
<span class="menu">menu</span>
</button>
</li>
</ul>
<nav id="menu--slide-right" class="nav menu--slide-right">
<ul class="main-menu">
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav><!-- end slide menu -->
JS:
jQuery(document).ready(function($) {
var openSidebar = function() {
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
}
var closeSidebar = function() {
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
}
$('.toggle-menu').click(function(event) {
event.stopPropagation();
openSidebar();
});
$(document).click(function(event) {
if (!$(event.target).closest('.menu--slide-right').length) {
closeSidebar();
}
});
});