使用jQuery最接近或最接近的切换选择列表？

下面有3个选择框。我希望能够使用jQuery切换显示选择列表项并隐藏选择列表项。有可能使用jQuery.closest（）或jQuery.next（）吗？使用jQuery最接近或最接近的切换选择列表？

<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>

注意：可以通过添加特定于每个锚标记和下面的ul标记的类来完成，但那会是更多的代码。我希望能够用更少的代码保持简单！

来源

2012-04-24 neelmeg

请澄清：你是否想要当用户选择A隐藏B1，C1，B2，C2？ – alexg 2012-04-24 14:11:07

是的。点击A将打开仅包含A，B，C的UL LI，然后再次点击会再次隐藏A，B，C。 – neelmeg 2012-04-24 14:12:20

另外，选定的项目应填充为框 – neelmeg 2012-04-24 14:30:44

<!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>

来源

2012-04-25 10:22:43 Thulasiram

现场演示中选择的项目请参阅此链接：http://jsfiddle.net/nanoquantumtech/KSshn/ – Thulasiram 2012-04-25 10:54:17

已经收拾你的HTML（你似乎有很多的表本身</dl>标签，并没有开口<dl>标签的任何地方）到以下几点：

<dl> 
    <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>

以下的jQuery似乎做如你所愿：

$（'dd'）。hide（）;

$('dt').click(
    function() { 
     var that = $(this), 
      affect = $(this).nextUntil('dt'), 
      v = affect.is(':visible'); 

     that.closest('dl').find('dd').slideUp(1000); 

     if (v == false){ 
      affect.slideDown(1000); 
     } 
     else if (v == true) { 
      affect.slideUp(1000); 
     } 
    });

JS Fiddle demo。

参考文献：

来源

2012-04-25 10:33:01

它的工作，但有一个小问题。当我打开第一个下拉菜单并尝试打开另一个下拉菜单时，第二个下拉列表值将被追加到第一个下拉菜单中。 – neelmeg 2012-04-25 18:46:41

使用jQuery最接近或最接近的切换选择列表？

回答

相关问题