问题描述
我用子菜单创建了一个侧栏，我的问题是当用户在子菜单容器（活动部分）之外单击时，我想隐藏子菜单。 我在尝试了解决方案，但无法正常工作。 我该怎么做才能使这项工作？ 我究竟做错了什么？ 我的示例代码和屏幕截图如下。
$(document).click(function(e){ var myTarget = $(".scrollbar-container"); var clicked = e.target.className; if($.trim(myTarget) != '') { if($("." + myTarget) != clicked) { $("#app-container").removeClass("sub-show-temporary"); } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="sidebar"> <div class="main-menu"> <div class="scroll"> <div class="scrollbar-container"> <ul class="list-unstyled nav flex-column"> <li class="active nav-item" id="dashboard-nav"> <a id="dashboard-page"> <i class="fa fa-tachometer"></i> <span>Dashboard</span> </a> </li> <li class="nav-item" id="activity-nav"> <a id="activity-menu"> <i class="fa fa-tasks"></i> <span>Activity</span> </a> </li> <li class="nav-item" id="retailer-nav"> <a id="retailer-menu"> <i class="fa fa-users"></i> <span>Retailer</span> </a> </li> <li class="nav-item" id="settings-nav"> <a id="settings-menu"> <i class="fa fa-gear"></i> <span>Settings</span> </a> </li> <li class="nav-item"> <a href="logout.php?logout"> <i class="fa fa-power-off"></i> <span>Logout</span> </a> </li> </ul> </div> </div> </div> <div class="sub-menu"> <div class="scroll"> <div class="scrollbar-container ps"> <ul class="d-block nav" id="activities-sub-menu"> <li class="nav-item active"> <a id="activities-page" class="active"> <i class="simple-icon-credit-card"></i> <span>Activities</span> </a> </li> <li class="nav-item"> <a id="activities-gallery-page"> <i class="simple-icon-list"></i> <span>Activity Gallery</span> </a> </li> </ul> <ul class="nav" id="retailer-sub-menu"> <li class="nav-item"> <a id="retailer-page"> <i class="simple-icon-check"></i> <span>Retailer</span> </a> </li> <li class="nav-item"> <a id="retailer-outlet-page"> <i class="simple-icon-check"></i> <span>Retailer Outlet</span> </a> </li> <li class="nav-item"> <a id="prospect-retailer-page"> <i class="simple-icon-calculator"></i> <span>Prospect Retailer</span> </a> </li> <li class="nav-item"> <a id="distance-matrix-page"> <i class="simple-icon-bubbles"></i> <span>Distance Matrix</span> </a> </li> </ul> <ul class="nav" id="settings-sub-menu"> <li class="nav-item"> <a> <i class="simple-icon-check"></i> <span>Retailer Outlet</span> </a> </li> </ul> </div> </div> </div> </div>
1楼
ali
2
已采纳
2019-02-21 07:25:59
使用此代码：
$(document).on('mouseup', function(e) {
if (!$(".sidebar").is(e.target) && $(".sidebar").has(e.target).length === 0) {
//close or hide your submenu
}
});