我有一些隐藏的嵌套列表。
当点击父 li 时,应该显示子列表。
如果单击另一个父 li,则所有打开的子列表都应关闭,只有最靠近被单击父 li 的子列表应打开。
我可以使上述所有方法正常工作,但是,如果我单击父 li 并展开子列表,如果我随后单击相同的父 li 关闭子列表,子列表将关闭然后再次打开。
我有什么想法可以让它发挥作用吗?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile Nav New</title>
<style>
.sub_list, .sub_sub_list {display:none;}
</style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".sub_list").slideUp();
$(this).closest(".parent").find(".sub_list").slideDown();
return false;
});
$(".sub_click").click(function() {
$(".sub_sub_list").slideUp();
$(this).closest(".test").find(".sub_sub_list").slideDown();
});
});
</script>
<body>
<div class="nav">
<ul>
<li class="parent">
<a href="#" class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a href="#" class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="test">
<a href="#" class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="teset">Type of driving</li>
</ul>
</li>
<li class="parent">
<a href="#" class="parent_click">Flying</a>
<ul class="sub_list">
<li>Type of aircraft</li>
<li>Type of flying</li>
</ul>
</li>
<li class="parent">
<a href="#" class="parent_click">Pampering</a>
<ul class="sub_list">
<li>Pampering Type</li>
<li>Treatment Type</li>
</ul>
</li>
</ul>
</div>
</body>
JS fiddle 在这里:http://jsfiddle.net/Q53AJ/
最佳答案
我稍微修改了你的代码。
貌似错误是不排除slideUp点击的元素
所以我加了
$(".parent_click").not(this).next().slideUp()
同时使用 slideToggle()
将完成关闭或打开当前 <ul>
的工作
将其从选定元素中排除。在 $(".sub_click").click()
上进行了同样的操作
关于具有相同类的 jQuery 切换元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22465912/