jquery如何实现点击div时他对应的子菜单始终显示 同级的ul则隐藏
<td><divid="parent1">父菜单1</div><ulid="menu1"><li>子菜单1</li><li>子菜单1</li></ul><divid="p...
<td>
<div id="parent1">父菜单1</div>
<ul id="menu1">
<li>子菜单1</li>
<li>子菜单1</li>
</ul>
<div id="parent2">父菜单2</div>
<ul id="menu2">
<li>子菜单2</li>
<li>子菜单2</li>
</ul>
</td>如何实现点击div时他对应的子菜单始终显示 同级的ul则隐藏
因为我这div ul 是通过循环得到的所以向下面这样写自能显示第一个<li>里的信息 只显示了一条 该怎么解决啊
$("div").click(function(){
$("ul").hide();
$(this).next().slideToggle().show();
} 展开
<div id="parent1">父菜单1</div>
<ul id="menu1">
<li>子菜单1</li>
<li>子菜单1</li>
</ul>
<div id="parent2">父菜单2</div>
<ul id="menu2">
<li>子菜单2</li>
<li>子菜单2</li>
</ul>
</td>如何实现点击div时他对应的子菜单始终显示 同级的ul则隐藏
因为我这div ul 是通过循环得到的所以向下面这样写自能显示第一个<li>里的信息 只显示了一条 该怎么解决啊
$("div").click(function(){
$("ul").hide();
$(this).next().slideToggle().show();
} 展开
2个回答
展开全部
楼主，你好，直接发代码了。那个JQuery的库我用的是本地路径，测试时要注意更换下。
希望我的回答对你有帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<style>
#menu1,#menu2{display:none;}
</style>
<script type="text/jscript">
$(function(){
$('#nav div').each(function(index) {
$(this).click(function(){
$('#nav ul').hide();
$(this).next(find('ul')).show();
})
});
});
</script>
</head>
<body>
<table width="144" id="nav">
<tr>
<td width="123">
<div id="parent1">父菜单1</div>
<ul id="menu1">
<li>子菜单1</li>
<li>子菜单1</li>
</ul>
<div id="parent2">父菜单2</div>
<ul id="menu2">
<li>子菜单2</li>
<li>子菜单2</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
希望我的回答对你有帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<style>
#menu1,#menu2{display:none;}
</style>
<script type="text/jscript">
$(function(){
$('#nav div').each(function(index) {
$(this).click(function(){
$('#nav ul').hide();
$(this).next(find('ul')).show();
})
});
});
</script>
</head>
<body>
<table width="144" id="nav">
<tr>
<td width="123">
<div id="parent1">父菜单1</div>
<ul id="menu1">
<li>子菜单1</li>
<li>子菜单1</li>
</ul>
<div id="parent2">父菜单2</div>
<ul id="menu2">
<li>子菜单2</li>
<li>子菜单2</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
去掉ul的hide，就能点一个显示一个，点第二遍才隐藏。没看懂你的问题。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
