gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:17:31 25 4
gpt4 key购买 nike

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

25 4 0