javascript - 如何只制作一个可选择的菜单选项 html 和 jquery

标签 javascript jquery html css

我有一个菜单栏，我试图使它一次只有一个可选的根列表项。当用户单击顶部标题之一时，会显示相应的子菜单。我遇到的问题是，当用户单击一个头部并将鼠标向上或向侧面移动而没有悬停在子菜单中时，他们现在可以点击另一个标题并同时显示 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;
}

J查询:

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

最佳答案

将 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 fiddle 更新:http://jsfiddle.net/2SC5G/3/

关于javascript - 如何只制作一个可选择的菜单选项 html 和 jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14905224/

上一篇：html - 打印 CSS 以向上移动右列

下一篇：javascript - 是否可以更改默认溢出 :hidden border?

相关文章：

javascript - 使用 mocha 和 browserify 进行测试

javascript - 需要帮助解释问题-提交表单时显示文本区域，但表单没有 onSubmit

javascript - 根据人们查看的位置提供图像？

javascript - 如何阻止激烈的 Javascript 循环卡住浏览器

html - 如何使用调整大小的 CSS 使容器内的每个元素都缩小

html - SoundManager w HTML5 音频导致 206 部分内容错误？

javascript - 通过 POST 发送一个 JavaScript 对象数组

javascript - Angular 应用程序在 IE 中崩溃，但在开发工具打开时不会崩溃

Javascript 分配对象

javascript - 如何使 d3 div 工具提示可滚动？

©2024 IT工具网  联系我们