jQuery代码为多个可点击下拉菜单有错误，请指教？ [英] jQuery code for multiple clickable drop down menu has errors, please advise?
本文介绍了jQuery代码为多个可点击下拉菜单有错误，请指教？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为这个jQuery脚本开发一个网站下拉菜单。
I am developing this jQuery script approach for a website drop down menu. I have come across a hiccup in the code that I cannot seem to get past.
附加信息：
- 下拉菜单在单击根级别菜单元素时展开。 [COMPLETE]
- 下拉菜单在单击相同的根级别菜单元素时关闭。 [COMPLETE]
- 从一个根菜单元素单击另一个菜单元素时，下拉菜单关闭。 [COMPLETE]
- 下拉菜单在点击下拉菜单区域外关闭。 [COMPLETE]
- 从根级别菜单支持多个下拉菜单。 [COMPLETE]
- Drop down menu expands upon clicking root level menu element. [COMPLETE]
- Drop down menu closes upon clicking same root level menu element. [COMPLETE]
- Drop down menu closes when clicking from one root level menu element to another. [COMPLETE]
- Drop down menu closes upon clicking outside of the drop down menu area. [COMPLETE]
- Support multiple drop down menus from root level menu. [COMPLETE]
这是当前有注释的脚本。问题似乎在于 $（。is-open）。hide（）; 。如果我从脚本中删除这一行，它将恢复单击打开并单击以关闭功能，但是，从DROP 1单击DROP 2时，下拉菜单将保持打开状态。）
This is the current script with comments. The problem seems to lay within, $(".is-open").hide();. If I remove this line from the script it restores the click to open and click to close functionality, however, when clicking from "DROP 1" to "DROP 2" the drop down menus will stay open.)
<script>
// this is the function caller for click into drop down menu
$(document).ready(function(){
// this to function call targets the drop down menu by elements
$("li:has(ul)").click(function(){
// (IMPORTANT) code to hide existing open drop down menu before displaying new drop down menu
$(".is-open").hide();
// code to toggle menu from drop down ROOT
$(this).find(".is-open").toggle();
});// END: .click
});// END: .ready
//this script closes menu when clicked outside of drop down menu.
$(document).on("click", function(event){
var $triggerOn = $(".dropdown");
if($triggerOn !== event.target && !$triggerOn.has(event.target).length){
$(".is-open").hide();
}// END: if statement
});// END: .on
</script>
这是完整的html文档。 >
Here is the full html document.
<!DOCTYPE html>
<html>
<head>
<style>
li > ul{display:none;}
.show {display:block;}
.sub-nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
}
.sub-nav ul:after {content: ""; clear: both; display: block;}
li {float: left;}
.sub-nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.sub-nav ul li:hover a {color: #fff;}
.sub-nav ul li a {
display: block;
padding: 20px 40px;
color: #757575;
text-decoration: none;
}
.sub-nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
.sub-nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
.sub-nav ul ul li a {padding: 15px 40px; color: #fff;}
.sub-nav ul ul li a:hover {background: #4b545f;}
</style>
</head>
<body>
<!-- START: nav -->
<div class="sub-nav">
<div class="container">
<ul>
<li class="active"><a href="#">ROOT 1</a></li>
<li><a href="#">ROOT 2</a></li>
<li><a href="#">ROOT 3</a></li>
<li><a href="#">ROOT 4</a></li>
<li><a href="#">ROOT 5</a></li>
<li class="dropdown"><a href="#">DROP 1</a>
<ul class="is-open">
<li><a href="#">SUB MENU 1</a></li>
<li><a href="#">SUB MENU 2</a></li>
<li><a href="#">SUB MENU 3</a></li>
<li><a href="#">SUB MENU 4</a></li>
</ul>
</li>
<li class="dropdown"><a>DROP 2</a>
<ul class="is-open">
<li><a href="#">SUB MENU LONG TITLE 1</a></li>
<li><a href="#">SUB MENU LONG TITLE 2</a></li>
<li><a href="#">SUB MENU LONG TITLE 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- END: nav -->
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// toggle drop down
$(document).ready(function(){
$("li:has(ul)").click(function(){
$(".is-open").hide();
$(this).find(".is-open").toggle();
});
});
// close menu when clicked outside of drop down menu
$(document).on("click", function(event){
var $triggerOn = $(".dropdown");
if($triggerOn !== event.target && !$triggerOn.has(event.target).length){
$(".is-open").hide();
}
});
</script>
推荐答案
我想我有你的水打嗝。问题在于这段代码：
I guess I have the water for your hiccup. The problem is with this piece of code:
$(document).ready(function(){
$("li:has(ul)").click(function(){
$(".is-open").hide();
$(this).find(".is-open").toggle();
});
});
无论你做什么，它总是关闭所有内容并打开它。添加一个这样的条件使其工作：
No matter what you do, it always closes everything and opens it. Adding a condition like this, makes it work:
$(document).ready(function(){
$("li:has(ul)").click(function(){
if ($(this).find(".is-open").is(":visible")) {
$(".is-open").hide();
} else {
$(".is-open").hide();
$(this).find(".is-open").toggle();
}
});
});
输出： http://output.jsbin.com/jodevoropu
Output: http://output.jsbin.com/jodevoropu
此外，我更改了以下内容： p>
Also I changed the following:
<li id="dropdown"><a href="#">DROP 1</a> <!-- Wrong -->
<li class="dropdown"><a href="#">DROP 1</a> <!-- Right -->
psst：现在将其标记为完整！ ：P
- >下拉菜单在单击根级别菜单元素时展开。 [COMPLETE]
- 下拉菜单在单击相同的根级菜单元素时关闭。 [COMPLETE]
- 从一个根级别菜单元素单击另一个菜单元素时，下拉菜单关闭。 [COMPLETE]
- 下拉菜单在点击下拉菜单区域外关闭。 [COMPLETE]
- 从根级别菜单支持多个下拉菜单。 [COMPLETE]
- Drop down menu expands upon clicking root level menu element. [COMPLETE]
- Drop down menu closes upon clicking same root level menu element. [COMPLETE]
- Drop down menu closes when clicking from one root level menu element to another. [COMPLETE]
- Drop down menu closes upon clicking outside of the drop down menu area. [COMPLETE]
- Support multiple drop down menus from root level menu. [COMPLETE]
这篇关于jQuery代码为多个可点击下拉菜单有错误，请指教？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
