0

我有一个菜单栏，我试图让它一次只有一个可选择的根列表项。当用户单击顶部标题之一时，会显示相应的子菜单。我遇到的问题是，当用户单击一个头并将鼠标向上或向一侧移动而没有悬停在子菜单中时，他们现在可以舔另一个标题并同时显示 2 个子菜单。

如果您从手机查看，则可以单击尽可能多的根菜单项，并且它们都同时显示各自的菜单……不理想。

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

在这里提琴

在此先感谢男孩/女孩。

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

查询：

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

1 回答 1

0

将 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/

于 2013-02-16T01:05:27.240 回答