使用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最接近或最接近的切換選擇列表？

回答

相關問題