个人中心
gpt4 book ai didi

javascript - 多个可点击下拉菜单的jQuery代码有错误，请指教？

转载 作者：可可西里 更新时间：2023-11-01 13:24:20 25 4
gpt4 key购买 nike

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

附加信息:

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

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

<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 文档。

<!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>

最佳答案

我想我有水可以缓解你的打嗝。问题出在这段代码上:

$(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();
    } else {
      $(".is-open").hide();
      $(this).find(".is-open").toggle();
    }
  });
});

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

我还更改了以下内容:

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

psst:现在将其标记为完成! :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]

关于javascript - 多个可点击下拉菜单的jQuery代码有错误，请指教？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41353337/

25 4 0
文章推荐： windows - 批处理脚本 - 如果存在复制到 %localappdata% 错误
文章推荐： php - 如何在 php 中获取谷歌分析实时 activeUsers？
文章推荐： php - Zend_Framework - 在区域设置 'zh' 中找不到区域
文章推荐： jquery - 需要在具有这些 ID 的点击事件上添加类 'select1'
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com