jQuery的each循环实现左侧下拉菜单的问题

期望效果:点击一个菜单,会显示选中的效果(背景变灰色,文字变红色),点击有子菜单的选项,子菜单会下拉显示,再点一下这个选项,子菜单收回(必须再点击同一个父选项才会收回)。
现有问题:选中效果已经出来,但在子菜单下拉后,点击列表中的任意选项都会使子菜单收回。
被要求的实现方式:通过控制高度(height),设置其为0或不为0来控制子菜单的显示,通过transition:height 1s来控制下拉效果。
附上代码:

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.2.1.js" type="text/javascript"></script>
        <style type="text/css">
            .nav_bg {
                height: 42px;
                border-bottom: 1px solid;
            }
            .nav_submenu {
                height: 24px;
                border-bottom: 1px solid;
            }
            .nav_bg_gray {
                background-color: gray;
            }
            .nav_sub {
                overflow: hidden;
                height: 0;
                transition: height 1s;
            }
        </style>
    </head>
    <body>
        <div id="menulist">
            <div class="nav_bg" id="nav_bg_1" onclick="loacalPage()">
                <a><span>单位审核</span></a>
            </div>
            <div class="nav_bg" id="nav_bg_2" onclick="loacalPage()">
                <a><span>未读事项</span></a>
            </div>
            <div class="nav_bg" id="nav_bg_3" onclick="loacalPage()">
                <a><span>我的工作</span></a>
            </div>
            <!--原本nav_submenu和nav_bg是同级,现添加一个div——nav_sub将他们包裹起来-->
            <div class="nav_sub" id="nav_bg_4">
                <div class="nav_submenu" onclick="loacalPage()">
                    <a><span>&nbsp;&nbsp;&nbsp;&nbsp;已完成</span></a>
                </div>
                <div class="nav_submenu" onclick="loacalPage()">
                    <a><span>&nbsp;&nbsp;&nbsp;&nbsp;未完成</span></a>
                </div>
            </div>
            <div class="nav_bg" id="nav_bg_5" onclick="loacalPage()">
                <a><span>督办事项</span></a>
            </div>
            <div class="nav_bg" id="nav_bg_6" onclick="loacalPage()">
                <a><span>测试</span></a>
            </div>
            <div class="nav_sub" id="nav_bg_7">
                <div class="nav_submenu" onclick="loacalPage()">
                    <a><span>&nbsp;&nbsp;&nbsp;&nbsp;测试1</span></a>
                </div>
                <div class="nav_submenu" onclick="loacalPage()">
                    <a><span>&nbsp;&nbsp;&nbsp;&nbsp;测试2</span></a>
                </div>
            </div>
        </div>
    </body>
    <script>
        $(function() {
            loacalPage();
        });
        function loacalPage() {
            changemenucolor();
            dropdown();
        }
        //该方法用于添加一个功能———点击“我的工作”或“测试”两项时,下面的子div隐藏,再次点击时则
        //显示
        function dropdown() {
            $("#nav_bg_3").on("click", function() {

                var subdiv = $("#nav_bg_4").find("div");
                var h = 0;
                subdiv.each(function() {
                    h += $(this).outerHeight();//获得每个子div的高度,包括边框
                });
                var val = $("#nav_bg_4").height();
                if(val != 0) {
                    $("#nav_bg_4").height(0);
                } else {
                    $("#nav_bg_4").height(h);
                }
            });
            $("#nav_bg_6").on("click", function() {

                var subdiv = $("#nav_bg_7").find("div");
                var h = 0;
                subdiv.each(function() {
                    h += $(this).outerHeight();//获得每个子div的高度,包括边框
                });
                var val = $("#nav_bg_7").height();
                if(val != 0) {
                    $("#nav_bg_7").height(0);
                } else {
                    $("#nav_bg_7").height(h);
                }
            });
        }

        //该方法使用了each进行循环,点击menudiv下的每一个div时,将点击的div样式改为灰底红字
        //其他地方的样式改为白底默认字体
        function changemenucolor() {
            $("#menulist div").click(function() {
                var menudiv = $("#menulist").find("div");
                var thisclass = $(this).attr("class");
                //添加该if条件进行判断,防止因多次重复进入each循环中而导致的nav_submenu无样式
                if(thisclass != 'nav_sub') {
                    menudiv.each(function() {
                        $(this).find('a').attr("style", "");
                        if($(this).attr("class") != 'nav_submenu') {
                            if($(this).attr("class") != 'nav_sub') {
                                $(this).attr("class", "nav_bg");
                            } else {
                                $(this).attr("style", "background-color:#fff;");
                            }
                        } else {
                            $(this).attr("style", "background-color:#fff;");
                        }
                    });
                }
                $(this).find('a').attr("style", "color:#B50B14;font-weight:bold");
                if($(this).attr("class") != 'nav_submenu') {
                    if($(this).attr("class") != 'nav_sub') {
                        $(this).addClass("nav_bg_gray");
                    } else {
                        $(this).attr("style", "background-color:gray;");
                    }
                } else {
                    $(this).attr("style", "background-color:gray;");
                }
            });
        }
    </script>
</html>

1个回答

解决了,我自己都一脸懵逼,在changemenucolor()中的$("#menulist div").click(function() 里面添加一个if判断:

 if($(this).attr("class")=="nav_sub"&&$(this).height()!=0){
                        event.stopPropagation();
                        return true;
                    }
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问