如何解决单击外部后关闭下拉菜单
如您所见,我有一个简单的导航菜单。点击“+”图标,下拉菜单打开,点击“-”图标,下拉菜单关闭。
我有一个目标。 单击外部或其他“+”时,上一个下拉菜单会自动关闭。我试过 if ( !isClickInside ),对我不起作用。
jQuery(document).ready(function($){
// var menu_ul = '.main-navigation .menu';
var menu_ul = $('.main-navigation').find('ul').first();
menu_ul.children('.menu-item-has-children').children('a').append('<span class="mytheme_menu_switch">+</span>');
// Touch friendly expanded nav
// $(menu_ul + ' li span').click(function(event){
$('.mytheme_menu_switch').click(function(event){
event.preventDefault();
// get the child of the clicked menu switch
var child_menu = $(this).parent().parent().children('ul');
// get the parent link of the clicked menu switch
var parent_link = $(this).parent();
// check if it's currently open or closed
if ( child_menu.hasClass('childopen') ) {
// if it's open,close it
// remove any "active" class from parent item
$(parent_link).removeClass('active');
// hide child menu
$(child_menu).removeClass('childopen');
// set this open menu switch to +
$(this).html('+');
} else {
// if it's closed,open it
// hide any open child menus
// $(menu_ul + ' ul').removeClass('childopen');
menu_ul.children('ul').removeClass('childopen');
// set any open menu switch symbols back to +
// $(menu_ul + ' li span').html('+');
menu_ul.children('li').children('span').html('+');
// show correct child menu
$(child_menu).addClass('childopen');
// set this open menu switch to -
$(this).html('-');
return false;
}
});
$('.navicon').click(function(){
if ( menu_ul.css('display') == 'none' ) {
menu_ul.addClass('show');
menu_ul.removeClass('closed').addClass('open');
menu_ul.children('.fa').removeClass('fa-navicon').addClass('fa-close');
} else {
menu_ul.removeClass('show');
menu_ul.removeClass('open').addClass('closed');
menu_ul.children('.fa').removeClass('fa-close').addClass('fa-navicon');
}
});
});
.main-navigation h1 {
display: none !important;
}
.main-navigation ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
white-space: nowrap;
}
.main-navigation ul li {
cursor: pointer;
list-style: none;
display: block;
position: relative;
padding: 0;
/* switch symbol for showing child */
/* nav child menu */
/* show child */
}
.main-navigation ul li a {
display: inline-block;
}
.main-navigation ul li span {
display: inline-block;
text-align: right;
width: 1.4em;
padding-right: 0.5em;
margin-left: 0.5em;
margin-right: -0.5em;
}
.main-navigation ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #1f2021;
}
.main-navigation ul li ul.childopen {
display: block;
}
/* expanded nav menu */
@media (min-width: 990px) {
.navicon {
display: none;
}
.navmenu {
display: block;
}
.main-navigation ul {
float: right;
display: inline-table;
}
.main-navigation ul li {
float: left;
/* expanded nav child menu */
}
.main-navigation ul li a {
padding: 1.2rem;
}
.main-navigation ul li ul {
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
}
.main-navigation ul li ul li {
float: none;
}
.main-navigation ul li ul li a {
width: 100%;
line-height: 4.5rem;
padding: 0 2.1875rem;
}
}
/* collapsed nav menu */
@media (max-width: 990px) {
.navicon {
float: right;
font-size: 1.65rem;
line-height: 2.8125rem;
text-align: center;
width: 54px;
margin-top: 5px;
cursor: pointer;
color: #fbc02d;
}
.main-navigation ul {
clear: left;
display: none;
/* collapsed nav child menu */
}
.main-navigation ul.show {
display: block;
background-color: #1f2021;
}
.main-navigation ul li a {
width: 100%;
line-height: 4.5rem;
padding: 0 2.1875rem;
}
.main-navigation ul ul {
position: relative;
left: 0;
}
}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<nav id="site-navigation" class="main-navigation">
<div class="navicon closed"><i class="fas fa-bars"><span class="menu-
text">Menu</span></i></div>
<div class="menu-testing-menu-container">
<ul id="primary-menu" class="menu">
<li><a href="#">Portfolio</a>
<ul class="sub-menu">
<li><a href="#">Hello world!</a></li>
<li><a href="#">Block: Image</a></li>
<li><a href="#">Block: Button</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul class="sub-menu">
<li><a href="#">Block: Quote</a></li>
<li><a href="#">Block category: Common</a></li>
</ul></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。