多个可点击下拉菜单的jQuery代码有错误，请指教? [英] jQuery code for multiple clickable drop down menu has errors, please advise?

查看：23
本文介绍了多个可点击下拉菜单的jQuery代码有错误，请指教?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为网站下拉菜单开发这种 jQuery 脚本方法.我在代码中遇到了一个我似乎无法解决的问题.

<小时>

附加信息:

<小时>

  1. 下拉菜单在单击根级菜单元素时展开.[完成]
  2. 下拉菜单在单击相同的根级菜单元素时关闭.[完成]
  3. 从一个根级菜单元素单击另一个根级菜单元素时，下拉菜单关闭.[完成]
  4. 在下拉菜单区域外单击时关闭下拉菜单.[完成]
  5. 支持来自根级菜单的多个下拉菜单.[完成]

这是带有注释的当前脚本.问题似乎在于$(".is-open").hide();.如果我从脚本中删除这一行，它会恢复单击打开和单击关闭功能，但是，当从DROP 1"单击到DROP 2"时，下拉菜单将保持打开状态.)

<小时>

<小时>

这里是完整的 html 文档.

<小时>

<头><风格>立>ul{显示:无；}.show {显示:块；}.sub-nav ul {背景:#efefef;背景:线性梯度(顶部，#efefef 0%，#bbbbbb 100%)；背景:-moz-线性梯度(顶部，#efefef 0%，#bbbbbb 100%)；背景:-webkit-线性梯度(顶部，#efefef 0%，#bbbbbb 100%)；box-shadow: 0px 0px 9px rgba(0,0,0,0.15);填充:0 20px；边界半径:0px；列表样式:无；位置:相对；}.sub-nav ul:after {content: "";清楚:两者；显示:块；}li {浮动:左；}.sub-nav ul li:hover {背景:#4b545f；背景:线性梯度(顶部，#4f5964 0%，#5f6975 40%)；背景:-moz-线性梯度(顶部，#4f5964 0%，#5f6975 40%)；背景:-webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);}.sub-nav ul li:hover a {color: #fff;}.sub-nav ul li a {显示:块；填充:20px 40px；颜色:#757575；文字装饰:无；}.sub-nav ul {背景:#5f6975；边界半径:0px；填充:0；位置:绝对；顶部:100%；}.sub-nav ul ul li {浮动:无；边框顶部:1px 实心 #6b727c；边框底部:1px 实心 #575f6a;位置:相对；}.sub-nav ul ul li a {padding: 15px 40px;颜色:#fff;}.sub-nav ul ul li a:hover {背景:#4b545f;}</风格><身体><!-- 开始:导航--><div class="sub-nav"><div class="容器"><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="#">子菜单1</a></li><li><a href="#">子菜单2</a></li><li><a href="#">子菜单3</a></li><li><a href="#">子菜单4</a></li><li class="dropdown"><a>DROP 2</a><ul class="is-open"><li><a href="#">子菜单长标题 1</a></li><li><a href="#">子菜单长标题 2</a></li><li><a href="#">子菜单长标题 3</a></li>

<!-- END: 导航 --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><脚本>//切换下拉菜单$(document).ready(function(){$("li:has(ul)").click(function(){$(".is-open").hide();$(this).find(".is-open").toggle();});});//在下拉菜单外单击时关闭菜单$(document).on("click", function(event){var $triggerOn = $(".dropdown");if($triggerOn !== event.target && !$triggerOn.has(event.target).length){$(".is-open").hide();}});

解决方案

我想我有水可以解决您的小问题.问题出在这段代码上:

$(document).ready(function(){$("li:has(ul)").click(function(){$(".is-open").hide();$(this).find(".is-open").toggle();});});

无论你做什么，它总是关闭一切并打开它.添加这样的条件，使其工作:

$(document).ready(function(){$("li:has(ul)").click(function(){if ($(this).find(".is-open").is(":visible")) {$(".is-open").hide();} 别的 {$(".is-open").hide();$(this).find(".is-open").toggle();}});});

输出:http://output.jsbin.com/jodevoropu

我还更改了以下内容:

<li id="dropdown"><a href="#">DROP 1</a><!-- 错了--><li class="dropdown"><a href="#">DROP 1</a><!-- 对-->

psst:现在将其标记为完成！:P

<块引用>

  1. 下拉菜单在单击根级菜单元素时展开.[完成]
  2. 单击相同的根级菜单元素时关闭下拉菜单.[完成]
  3. 从一个根级菜单元素单击另一个根级菜单元素时，下拉菜单关闭.[完成]
  4. 在下拉菜单区域外单击时关闭下拉菜单.[完成]
  5. 支持来自根级菜单的多个下拉菜单.[完成]

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.

Additional Information:

  1. Drop down menu expands upon clicking root level menu element. [COMPLETE]
  2. Drop down menu closes upon clicking same root level menu element. [COMPLETE]
  3. Drop down menu closes when clicking from one root level menu element to another. [COMPLETE]
  4. Drop down menu closes upon clicking outside of the drop down menu area. [COMPLETE]
  5. Support multiple drop down menus from root level menu. [COMPLETE]

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>

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();
    }
  });
});

Output: http://output.jsbin.com/jodevoropu

Also I changed the following:

<li id="dropdown"><a href="#">DROP 1</a>    <!-- Wrong -->
<li class="dropdown"><a href="#">DROP 1</a> <!-- Right -->

psst: Now mark this as complete! :P

  1. Drop down menu expands upon clicking root level menu element. [COMPLETE]
  2. Drop down menu closes upon clicking same root level menu element. [COMPLETE]
  3. Drop down menu closes when clicking from one root level menu element to another. [COMPLETE]
  4. Drop down menu closes upon clicking outside of the drop down menu area. [COMPLETE]
  5. Support multiple drop down menus from root level menu. [COMPLETE]

这篇关于多个可点击下拉菜单的jQuery代码有错误，请指教?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆