单击第三层菜单项后如何关闭菜单答案

【问题标题】：How to close the menu after click third layer menu item单击第三层菜单项后如何关闭菜单
【发布时间】：2012-11-15 05:34:39
【问题描述】：

点击第三层菜单项后如何关闭下面的CSS+js下拉菜单。现在，当我单击菜单外的任何位置时，它将关闭。我想点击第三层菜单关闭菜单。

这是一个Fiddle 示例。

HTML代码：

 <ul class="dropdown">
            <li><a href="#">Please select</a>
                <ul class="sub_menu">
                     <li>
                         <a href="#">Artificial Turf</a>
                         <ul>
                            <li><a href="#" class="subMenu">Indoor</a></li>
                            <li><a href="#" class="subMenu">Outdoor</a></li>
                        </ul>                    
                    </li>
                     <li>
                        <a href="#">Batting Cages</a>
                        <ul>
                            <li><a href="#" class="subMenu">Indoor</a></li>
                            <li><a href="#" class="subMenu">Outdoor</a></li>
                        </ul>
                     </li>
                </ul>
            </li>
        </ul

CSS 代码：

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative;color:#333;z-index: 9999; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; position: relative; }
ul.dropdown li a                    { display: block; padding: 8px 8px;color:#333;text-decoration:none;}
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,ul.dropdown li:hover  { background: #CCC; position: relative; text-decoration: none;}

/* 
    LEVEL TWO
*/
ul.dropdown ul                         { width: 140px; visibility: hidden; position: absolute; top: 100%; left: 0px;margin-top:0px; font-size: 12px;margin:0px;border: 1px solid #999;}
ul.dropdown ul li                     { font-weight: normal; background: #E5E5E5; color: #000;border-bottom: 1px solid #ccc; float: none; margin:0px;padding:0px;padding-left:5px;}

                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                    { border-right: none; width: 100%; display: inline-block;margin:0px; padding: 8px 0px;text-decoration:none;} 

/* 
    LEVEL THREE
*/
ul.dropdown ul ul                     { left: 100%; top: 0; max-height: 380px; overflow: auto;width:200px;}

Javascript 代码：

$(".dropdown li").click(function() { 
        $(this).parent().children("li").not(this).children("ul").css({ "visibility":"hidden" });
        $(this).children("ul").css({ "visibility":"visible" });
})

$('html').click(function() {
   $(".dropdown ul").css({ "visibility":"hidden" });
});

$('.dropdown').click(function(event){
     event.stopPropagation();
});


# this one not working
$('.subMenu').click(function(event) {
    $(".dropdown ul").css({ "visibility":"hidden" });
    event.preventDefault();
});

【问题讨论】：

标签： javascript jquery css drop-down-menu

【解决方案1】：

尝试添加此功能。

$('.dropdown ul ul li a').click(function(event) {
   $(".dropdown ul").css({ "visibility":"hidden" });
   event.stopPropagation();
});

它会在点击第三层时关闭它，并且 event.stopPropagation() 将禁止再次打开它。

这里是updated fiddle

【讨论】：

【解决方案2】：

您可以使用display:hidden，然后使用来自jQuery 的hide() 和show() 方法，而不是在CSS 中使用visibility:hidden，如下所示：

现场演示：

http://jsfiddle.net/oscarj24/panzd/13/

那么，这只是唯一改变的部分......

$('.dropdown').on('click', '.subMenu', function(event) {
    $(".dropdown ul").hide();
    event.preventDefault();
});

【讨论】：