我的页面顶部有一个菜单栏，单击时会显示子菜单，我想在单击页面中的任何位置时使子菜单消失。到目前为止，我编写了代码以在单击我的菜单时显示子菜单。下面是相同的代码!
有人可以帮助我使用现有代码来关闭子菜单部分吗？
非常感谢!
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
$(this).find('ul.submenu').css('transition', '1s');
//$(this).find('div.divsubsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open);
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});#topnav {
width: 800px;
height: 30px;
background-color: #191919;
margin-top: 10px;
position: relative;
font-size: 12px;
font-family: Verdana;
margin: auto;
text-align: center;
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a.MenuLink {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
border: double #161718;
border-width: 1.3px;
border-top: none;
border-bottom: none;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
background-color: black;
text-decoration: none;
transition: 0.3s;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
font-size: 15px;
font-weight: bold;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
width: 800px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: block;
color: #00537F;
font-weight: bold;
padding: 4px 8px;
}
#topnav ul.submenu>li:hover>a {
background-color: black;
color: white;
}
#topnav ul div {
visibility: hidden;
}
#topnav li:hover ul div.divsubsubmenu {
visibility: hidden;
}
#topnav li li:hover div.divsubsubmenu {
visibility: visible;
opacity: 1;
z-index: 1;
}
#topnav div.divsubsubmenu {
height: 50px;
background: black;
color: white;
float: left;
left: 0;
width: 800px;
position: absolute;
}
#topnav div.divsubsubmenu>ul>li:hover>a {
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="topnav">
<ul>
<li>
<a class="MenuLink" href="#">Admin</a>
</li>
<li>
<a class="MenuLink" href="#"> MAC </a>
<ul class="submenu">
<li><a href="#">Master Data</a></li>
<li>
<a href="#">Transaction Data</a>
<div class="divsubsubmenu">
<ul>
<li><a href="#">Company Master</a></li>
<li><a href="#">Location Master</a></li>
<li><a href="#">Size Master</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Admin Data</a>
</li>
</ul>
</li>
<li>
<a class="MenuLink" href="#">TPC </a>
<ul class="submenu">
<li><a href="#">TPC1</a></li>
<li><a href="#">TPC2</a></li>
</li>
</ul>
</div>
</body>最佳答案
只需在您的 javascript 中添加这段小代码:
$("body").on('click', function(e){
var element = e.target.tagName;
if(element !== 'A') {
$("#topnav ul li ul.submenu").css('display', 'none');
}
});
希望对您有所帮助。
关于javascript - 单击页面中的任意位置关闭子菜单下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49270999/