jQuery4个点击事件，点击任意一个显示的同时，其他3个是隐藏状态
我现在达到的效果只是一个事件，是显示的，在点击第二个事件，第一个显示的还是在，要达到的效果就点击一个，其他3个都隐藏，只显示1个当前的
希望能在这基础上修改，因为我也是不太会
第1个回答 推荐于2016-11-02
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>
RunJS 演示代码
</title>
<style type="text/css">
</style>
<script type="text/javascript">
jQuery(function($){
$(".nav ul li").click(function(){
$(this).children(".menu").show().end().siblings("li").children(".menu").hide();
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li>
11
<ul class="menu">
<li>
1111
</li>
<li>
11111
</li>
</ul>
</li>
<li>22
<ul class="menu">
<li>
2222
</li>
<li>
22222
</li>
</ul>
</li>
<li>33
<ul class="menu">
<li>
3333
</li>
</ul>
</li>
<li>aa
<ul class="menu">
<li>
aaaa
</li>
<li>
aaaaa
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>本回答被提问者采纳
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>
RunJS 演示代码
</title>
<style type="text/css">
</style>
<script type="text/javascript">
jQuery(function($){
$(".nav ul li").click(function(){
$(this).children(".menu").show().end().siblings("li").children(".menu").hide();
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li>
11
<ul class="menu">
<li>
1111
</li>
<li>
11111
</li>
</ul>
</li>
<li>22
<ul class="menu">
<li>
2222
</li>
<li>
22222
</li>
</ul>
</li>
<li>33
<ul class="menu">
<li>
3333
</li>
</ul>
</li>
<li>aa
<ul class="menu">
<li>
aaaa
</li>
<li>
aaaaa
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>本回答被提问者采纳
第2个回答 2015-03-31
这个不要用toggle. 因为同时存在显示/隐藏.
$('.nav ul li').find('.menu').hide();
$(this).find('.menu').show();
$('.nav ul li').find('.menu').hide();
$(this).find('.menu').show();
相似回答