jQuery的UL切換問題

我有以下代碼：jQuery的UL切換問題

 <ul id="reportType"> 
      <li>A</li> 
       <ul id="Ul1"> 
        <li>B</li> 
        <li>C</li> 
       </ul> 
      <li>AA</li> 
       <ul id="bpmReportsList"> 
        <li>D</li> 
        <li>E</li> 
       </ul> 
      <li>AAA</li> 
     </ul> 

<script type="text/javascript" > 
$(document).ready(function(){ 

$('#reportType').children('li').click(function() { 
     $(this).find('li').toggle(); 
}); 
}); 
</script>

當您單擊上方里的之一（A，AA，AAA）我希望它切換它下面的李，但它不做到這一點

我知道它選擇正確的李因爲我設法隱藏特定李而不是什麼在它之下

有什麼想法？

感謝

多倫

來源

2011-08-11 Doron Sinai

的'li' '孩子' 不是的孩子父'李'。您的縮進有點誤導。 A與Ul1處於同一水平。 – pimvdb

是的，UL需要位於LI – rickyduck

你縮進使它看起來像你想ul s爲的li的孩子。但是，情況並非如此，因爲ul完全不包含在父項li之內。

您可能想要沿着這條線代替：http://jsfiddle.net/pimvdb/KNFhu/1/。

<ul id="reportType"> 
    <li>A 
     <ul id="Ul1"> 
      <li>B</li> 
      <li>C</li> 
     </ul> 
    </li> 
    <li>AA 
     <ul id="bpmReportsList"> 
      <li>D</li> 
      <li>E</li> 
     </ul> 
    </li> 
    <li>AAA</li> 
</ul>

來源

2011-08-11 14:46:54 pimvdb

jQuery代碼是好的，你只需要做出小的改變你的HTML。

唯一的變化是讓您頂級的你ul元素孩子li元素，如下圖所示：

<ul id="reportType"> 
    //Item 1 
    <li>A 
     <ul id="Ul1"> 
      <li>B</li> 
      <li>C</li> 
     </ul> 
    </li> 

    //Item 2 
    <li>AA 
     <ul id="bpmReportsList"> 
      <li>D</li> 
      <li>E</li> 
     </ul> 
    </li> 

    //Item 3 
    <li>AAA 
    </li> 
</ul>

更新jQuery來處理嵌套列表：

$('#reportType li > ul').each(function(i) { 

    var parent = $(this).parent('li'); 

    var ul = $(this).remove(); 
    parent.click(function(){ 
      ul.toggle(); 
    }); 

    parent.append(ul); 
}); 

// Initially hides all sub-lists 
$('ul ul').hide();

Working Demo | Working Demo (with Nesting)

來源

2011-08-11 14:46:03

這不適用於嵌套列表。 – AlienWebguy

更新以處理嵌套列表:)謝謝AlienWebguy –

真棒:) +1 ~~ – AlienWebguy

你<ul>的應該嵌套在<li>內的，就像這樣：

 <ul id="reportType"> 
     <li>A 
      <ul id="Ul1"> 
       <li>B</li> 
       <li>C</li> 
      </ul> 
     </li> 
     <li>AA 
      <ul id="bpmReportsList"> 
       <li>D</li> 
       <li>E</li> 
      </ul> 
     </li> 
     <li>AAA</li> 
    </ul> 

<script type="text/javascript" > 
$(document).ready(function(){ 

    $('#reportType').children('li').click(function() { 
    $(this).find('li').toggle(); 
    }); 
}); 
</script>

來源

2011-08-11 14:46:25

所需的ul元素被包裹在li的，而不是把它們下面：

<ul id="reportType"> 
    <li>A 
     <ul id="Ul1" class="hidden"> 
      <li>B</li> 
      <li>C</li> 
     </ul> 
    </li> 
    <li>AA 
     <ul id="bpmReportsList" class="hidden"> 
      <li>D</li> 
      <li>E</li> 
     </ul> 
    </li> 
    <li>AAA</li> 
</ul> 



$('#reportType').children('li').click(function() { 
    $(this).next('ul').toggle(); 
});

工作演示here

來源

2011-08-11 14:48:57 Tomgrohl

jQuery的UL切換問題

回答

相關問題