我正在努力为移动网站创建/完成类似菜单的应用程序。
单击导航中的按钮时,会显示一个菜单弹出窗口。当我再次单击同一个按钮时,它会很好地关闭。但是,当弹出窗口打开并且我单击导航栏中的另一个按钮时,两个菜单相互重叠。
我正在努力让我的逻辑正确。因为切换类(class)不起作用。我正在为此努力,所以也许我错过了一些简单/愚蠢的事情。
我创建了一个 fiddle在这里更好地解释问题。
感谢任何帮助。
$(function() {
var $body = $("body"),
$btn = $(".menuButton"),
$menu = $(".mobile-menu");
$btn.one('click', function() {
$body.append('<div class="mobile-menu-overlay" />');
});
$btn.on('click', function() {
$(this).siblings().removeClass('open');
var $open_menu = $(this).data('open');
$menu.find('.' + $open_menu).toggle()
if ($(this).hasClass('open')) {
$(this).removeClass('open')
$body.removeClass('mobile-open')
$(this).closest($menu).removeClass('open')
} else {
$(this).addClass('open')
$body.addClass('mobile-open')
$(this).closest($menu).addClass('open')
}
// $(this).siblings().removeClass('open');
// var $open_menu = $(this).data('open');
// $menu.find('.'+$open_menu).toggle()
// $(this).toggleClass('open')
// $body.addClass('mobile-open')
// $(this).closest($menu).addClass('open')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mobile-nav">
<ul>
<li class="search menuButton" data-open="search"><span>Search</span></li>
<li class="menu menuButton" data-open="nav"><span>Menu</span></li>
<li class="cart menuButton" data-open="cart"><span>Cart</span></li>
<li class="account menuButton" data-open="account"><span>Account</span></li>
</ul>
</div>
<div class="mobile-menu">
<div class="mobile-section top-section open">
<div class="section-content">
<div class="account" style="background:yellow">account content</div>
<div class="cart" style="background:blue">cart</div>
<div class="search" style="background:orange">search</div>
<ul class="nav" style="background:green">
<li class="has-children">
<a href="url" title="title">category-title
<span class="menu-icon" data-slide="forward">
<i class="fa fa-chevron-right"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
最佳答案
问题出在这里:
$menu.find('.' + $open_menu).toggle()
当你切换一个菜单时,你应该关闭它的兄弟。
我建议使用类来处理这个问题,这样你就可以做这样的事情:
$menu.find('.'+$open_menu).addClass('menu_open').siblings().removeClass('menu_open');
关于javascript - 单击其他按钮打开/关闭移动菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52026004/