如何仅使一个可选菜单选项html和jquery

我有一个菜单栏，我试图使一次只有一个可选的根listitem。当用户点击其中一个顶部标题时，显示相应的子菜单。我遇到的问题是当用户单击一个头并将鼠标向上或向侧面移动而没有悬停在子菜单中时，他们现在可以舔另一个标题并同时显示2个子菜单。如何仅使一个可选菜单选项html和jquery

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

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

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

来源

2013-02-15 B3st0fth3w0rst

更改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-16 01:05:27

感谢您的帮助，但现在当您点击子菜单中它会自动消失。尝试去搜索>结果你会明白我的意思。 – B3st0fth3w0rst 2013-02-16 03:47:47

任何想法的人？ – B3st0fth3w0rst 2013-02-16 23:39:22

对不起，我没有正确测试它。我又去了一次，我已经改变了主菜单html中的几个类，所以show子菜单事件不是由它自己的子菜单中的按钮触发的。 http://jsfiddle.net/2SC5G/5/ – 2013-02-18 17:32:32

如何仅使一个可选菜单选项html和jquery

回答

相关问题