Question

我有一个菜单栏，我想要一次只有一个可选的root listitem。当用户单击其中一个顶部标题时，将显示其各自的子菜单。我遇到的问题是，当用户点击一个头并将鼠标向上或向侧移动而没有悬停进入子菜单时，他们现在可以舔另一个标题并同时显示2个子菜单。

如果你从手机上查看，那么你可以点击尽可能多的根菜单项，它们都会同时显示各自的菜单...不理想。

但是，如果用户点击标题，并将鼠标移动到子菜单，则一切正常，因为当他们离开该菜单点击另一个根项时，第一个菜单（及其子菜单）就会消失。

FIDDLE HERE

先谢谢你们的男生/女孩。

HTML：

<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="includes/menu.js"></script></script>
    <link type="text/css" href="includes/menu.css" rel="stylesheet" />
</head>
<body>
    <div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
        <div id="menuJQ">
            <ul class="menuJQ">
                <li class="parent"><a href="#"><span>Home</span></a></li>
                <li><a class="parent" href="#"><span>Product View</span></a> 
                    <div class="submenu">
                        <ul>
                            <li><a href="#"><span>DevTask Search</span></a></li>
                            <li><a href="#"><span>Active Machines</span></a></li>
                        </ul>
                    </div>
                </li>
                <li class="parent"><a href="#"><span>Request Tool</span></a></li>
                <li><a href="#" class="parent"><span>Search</span></a>
                    <div class="submenu">
                        <ul>
                            <li><a href="#"><span>DevTask Search</span></a></li>
                            <li><a href="#"><span>Active Machines</span></a></li>
                            <li><a href="#"><span>Integrity Query</span></a></li>
                            <li><a href="#"><span>Internal DevTasks</span></a></li>
                            <li><a href="#" class="parent"><span>Results</span></a>
                                <div class="submenu">
                                    <ul>
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
                                        <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
                                            <div class="submenu">
                                                <ul>
                                                    <li><a href="#"><span>DevTask Search</span></a></li>
                                                    <li><a href="#"><span>Active Machines</span></a></li>
                                                    <li><a href="#"><span>Integrity Query</span></a></li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#"><span>Issues for Stability Team</span></a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS：

/* menu::base */
.expand{
    display:block;
}
.collapse{
    display:none;
}
div#menuJQ {
    height: 46px;
    padding-left: 0px;
    width:auto;
    /* background: url(../includes/images/right2.png) repeat right 0;  */
    background-color:black; 
}

div#menuJQ ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menuJQ ul.menuJQ {
    padding-right: 0px;
}

div#menuJQ li {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}

div#menuJQ ul ul li {
    z-index: 9;
}
div#menuJQ li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 39px;
    left: -18px;
    -left: 4px;
    visibility: hidden;
    transition-delay: 0.5s;
    -moz-transition-delay: 0.5s; /* Firefox 4 */
    -webkit-transition-delay: 0.5s; /* Safari and Chrome */
    -o-transition-delay: 0.5s; /* Opera */
    width: 180px;
      margin: 0px 0 0 -4px;
    padding: 0; 
    background: url(../includes/images/submenu-top.png) no-repeat 0px 0;
    -background: url(../includes/images/submenu-top.gif) no-repeat 0px 0; 
}
div#menuJQ ul ul { /*submenu*/
    display:none;
      z-index: 12;
      width: 180px;
    padding: 0px 0px 12px 0px;
    -padding: 0px 0px 3px 0px;    
    background: url(../includes/images/submenu-bottom.png) no-repeat 0px bottom;
    -background: #E4E4E2 none;        
    margin: 14px 0 0 0;   
    -margin: 5px 0 0 0;      
}
div#menuJQ li > div {
    visibility: visible;
}

div#menuJQ a {
    position: relative;
    z-index: 10;
    height: 38px;
    display: block;
    float: left;
    line-height: 38px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
div#menuJQ span {
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Tahoma;
    background: none;
    line-height: 38px;  
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menuJQ a {
    padding: 0 15px 0 0;
    line-height: 38px;
    height: 46px;
    _margin-right: 1px;
    background: none;
    font-weight:bold;    

}
div#menuJQ span {
    font-weight:bold; 
}
div#menuJQ a:hover{
    background-image: url(../includes/images/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;    
    -background: url(../includes/images/selected-sub.gif) repeat-x right -1px; 
}
div#menuJQ li.current a,
div#menuJQ ul.menuJQ>li:hover>a {
    background-image: url(../includes/images/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;  
    -background: url(../includes/images/selected-sub.gif)  repeat-x right -1px; 
}
div#menuJQ a:hover span{
      color: #000000;
}   
div#menuJQ ul.menuJQ>li:hover>a span {
      color: #000000;
}
div#menuJQ li {}
div#menuJQ li.last { background: none; }


/* menu::level2 */
div#menuJQ ul ul li {
    background-image: url(../includes/images/sep-sub.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0;
    padding: 0;
}
div#menuJQ ul ul li:hover {
    background-image: url(../includes/images/sub-item-hover.gif);
    background-color: #717171;
    background-repeat: repeat-x;
    background-position: left top;
}
div#menuJQ ul ul a {
      color: #000000;   
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    font-size: 13px;
    z-index: -1;
    padding: 6px 0 6px 0px;
    white-space: normal;
    width: 166px;
    margin: 0 0px 0 13px;
    background: none;
}

div#menuJQ ul ul a span {
    color: #000000; 
      padding: 0 3px;
    line-height: 25px;
    font-size: 13px;
    font-weight: normal;
    margin:0;    
}
div#menuJQ li.current ul a,
div#menuJQ li.current ul a span {
    background: none;
}
div#menuJQ ul ul a:hover {
    background: none;
  color: #fff;
}
div#menuJQ ul ul a:hover span {
  background: none;
  color: #fff;
}
div#menuJQ ul ul a.parent {
  background: url(../includes/images/submenu-pointer.png) no-repeat right top;
  -background: url(../includes/images/submenu-pointer.gif) no-repeat right top;  
  margin-right: -1px;
}
div#menuJQ ul ul a.parent span {
  padding-right: 26px;
}
div#menuJQ ul ul a.parent:hover {
  background: url(../includes/images/submenu-pointer-hover.gif) no-repeat right top;
  -background: url(../includes/images/submenu-pointer.gif) no-repeat right top;  
}
div#menuJQ ul ul a.parent:hover span {
}
div#menuJQ ul ul span {

    margin-top: 0;
    text-align: left;
}
div#menuJQ ul ul li.last { background: none; }
div#menuJQ ul ul li {
    width: 100%;
}

/* menu::level3 */

div#menuJQ ul ul div {
      width: 180px;
      padding: 0;
    background: url(../includes/images/subsubmenu-top.png) no-repeat 0px 0;
    -background: url(../includes/images/subsubmenu-top.gif) no-repeat 0px 0;      
    margin: -32px 0 0 198px !important;
    margin: -32px 0 0 176px;
}
div#menuJQ ul ul ul {
    padding: 11px 0px 9px 0px;  
    margin: 20px 0 0 0; 
}
div#menuJQ ul ul div li {
    position:relative;
    top:-10px;
}

/* lava lamp */
div#menuJQ li.back {
    background: url(../includes/images/selected-sub.png) no-repeat 0 0;
    -background: url(../includes/images/selected-sub.gif) no-repeat 0 0;    
    width: 5px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0px 0 0 0;
}


div#menuJQ li.back .left {
    padding:0;
    width:auto;
    background: url(../includes/images/selected-sub.png) repeat-x right 0;
    -background: url(../includes/images/selected-sub.gif) repeat-x right 0;     
    height: 46px;
    margin: 0 0 0 5px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}

Jquery的：

$(document).ready(function(){
    $(function() {
        $('#menuJQ > ul li').click(function(e) {
            e.preventDefault();
            $('ul:first', this).show("fast").siblings().hide("fast");
        });
    });
    $('.submenu').mouseleave(function() {
        $('ul', this).hide("fast");
    });
});

Answer 1

将Javascript更改为：

$(document).ready(function(){

    $('#menuJQ').on('click', 'li', function(e) {
        e.preventDefault();
        $('.submenu').find('ul').css('display', 'none'); //display none all submenus
        $('ul:first', this).show("fast").siblings().hide("fast");
    });

    $('.submenu').on('mouseleave', 'ul', function(e) {
        e.preventDefault();
        $(this).hide("fast");
    });

});

这是一个JS小提琴更新：http://jsfiddle.net/2SC5G/3/

如何只生成一个可选菜单选项html和jquery

1 个答案: