我创建了一个下拉菜单，并尝试使用 jquery 显示它的子菜单。 到目前为止，我已经设法显示子菜单，但只能通过 ID 名称显示。
如何只显示被点击的 li 元素的子菜单？ 我试过: $(this).children("ul)".addclass("expand").show(); 但不行。
<html>
<head>
<script type="text/javascript" src="includes/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><span style="padding-top:9px;padding-left:5px;"><img src='includes/css/images/bblogo.png' onClick="window.location = 'index.php';"> </span></li>
<li class="parent"><a href="#"><span>Home</span></a></li>
<li><a class="parent" href="#"><span>Product View</span></a>
<div>
<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>
<ul id="sub1">
<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>3Results</span></a>
<div>
<ul id="sub2">
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
</ul>
</div>
</li>
<li><a href="3"><span>Issues for Stability Team</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
$(document).ready(function(){
$('a.parent').click(function() {
$("#sub1").addClass("expand").toggle("fast");
var submenu_active = false;
});
var submenu_active = false;
$('div#menuJQ ul ul').mouseenter(function() {
submenu_active = true;
});
$('div#menuJQ ul ul').mouseleave(function() {
submenu_active = false;
setTimeout(function() {
if (submenu_active === false) $('div#menuJQ ul ul').hide("fast");});
});
});
最佳答案
试试这个:http://jsfiddle.net/sefbT/
您必须将脚本放在 head 或 body 中，而不是在 html 之外:
$(function() {
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show();
});
});
CSS:
ul ul {
display:none;
}
和这个 html:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show();
});
});
</script>
</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>123</li>
<li class="parent"><a href="#"><span>Home</span></a>
</li>
<li><a class="parent" href="#"><span>Product View</span></a>
<div>
<ul style='padding:0 0 0 50px;'>
<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>
<ul id="sub1" style='padding:0 0 0 50px;'>
<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>3Results</span></a>
<div>
<ul id="sub2" style='padding:0 0 0 50px;'>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
</li>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
</li>
</ul>
</div>
</li>
<li><a href="3"><span>Issues for Stability Team</span></a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
关于javascript - HTML li ul 下拉菜单层次结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14867939/