有如下3个选择框。我希望能够使用 jQuery 切换来显示选择列表项并隐藏选择列表项。是否可以使用 jQuery.closest() 或 jQuery.next()？
<dt><a href="#"><span>A - All</span></a></dt>
<dd>
<ul>
<li><a href="#">A<img class="flag"/><span class="value">A</span></a></li>
<li><a href="#">B<img class="flag"/><span class="value">B</span></a></li>
<li><a href="#">C<img class="flag"/><span class="value">C</span></a></li>
</ul>
</dd>
</dl>
<dt><a href="#"><span>A1 - All</span></a></dt>
<dd>
<ul>
<li><a href="#">A1<img class="flag"/><span class="value">A1</span></a></li>
<li><a href="#">B1<img class="flag"/><span class="value">B1</span></a></li>
<li><a href="#">C1<img class="flag"/><span class="value">C1</span></a></li>
</ul>
</dd>
</dl>
<dt><a href="#"><span>A2 - All</span></a></dt>
<dd>
<ul>
<li><a href="#">A2<img class="flag"/><span class="value">A2</span></a></li>
<li><a href="#">B2<img class="flag"/><span class="value">B2</span></a></li>
<li><a href="#">C2<img class="flag"/><span class="value">C2</span></a></li>
</ul>
</dd>
</dl>
注意:可以通过添加特定于每个 anchor 标记和后面的 ul 标记的类来完成，但那样会需要更多代码。我希望能够用更少的代码保持简单!
最佳答案
<!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>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu > dd').hide();
$('#menu dt').click(function () {
var objNext = $(this).next('dd');
if (objNext.is(':visible') === true) {
objNext.slideUp();
}
else {
$('#menu > dd').slideUp(); //( when A is clicked A,B,c show . now B is clicked now A1,B1,C1 show and hide A,B,C, ) else ( comment this line alone ).
objNext.slideDown();
}
});
});
</script>
</head>
<body>
<dl id="menu">
<dt><a href="#"><span>A - All</span></a></dt>
<dd>
<ul>
<li><a href="#">A<img class="flag" /><span class="value">A</span></a></li>
<li><a href="#">B<img class="flag" /><span class="value">B</span></a></li>
<li><a href="#">C<img class="flag" /><span class="value">C</span></a></li>
</ul>
</dd>
<dt><a href="#"><span>A1 - All</span></a> </dt>
<dd>
<ul>
<li><a href="#">A1<img class="flag" /><span class="value">A1</span></a></li>
<li><a href="#">B1<img class="flag" /><span class="value">B1</span></a></li>
<li><a href="#">C1<img class="flag" /><span class="value">C1</span></a></li>
</ul>
</dd>
<dt><a href="#"><span>A2 - All</span></a> </dt>
<dd>
<ul>
<li><a href="#">A2<img class="flag" /><span class="value">A2</span></a></li>
<li><a href="#">B2<img class="flag" /><span class="value">B2</span></a></li>
<li><a href="#">C2<img class="flag" /><span class="value">C2</span></a></li>
</ul>
</dd>
</dl>
</body>
</html>
关于jquery - 使用 jQuery closest 或 next 切换选择列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10299661/