jqueryのULトグル問題

Question

、私は次のコードを持って：あなたは、上側李さん（A、AA、AAA）のいずれかをクリックすると

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

を私はそれがその下にリチウムを切り替えたいが、それはしません

は私がいただきました！

その下に任意の考えの特定のリチウムを隠すために管理ではなくので、それが右の李を選択知っているのですか？

おかげ

ドロン

Answer 1

あなたのインデントは、あなたがul sがliの子であると考えるようにそれが思われてしまいます。しかし、ulが親の中に包まれていないので、これは当てはまりません。li。

の代わりに、次の行に沿って何かが必要な場合があります。 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> 

Answer 2

あなたのjQueryのコードは、あなただけのHTMLへの小さな変更を行うために必要な、結構です。

$('#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：jQueryの更新

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

は、ネストされたリストを処理するために、以下に示すよう

唯一の変化は、あなたのトップレベルのli要素をごul要素の子を作ることです|

Answer 3

あなた<ul>Working Demo (with Nesting)そうのように、S 'sは<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> 

Answer 4

ul要素年代、それらの下に入れない：

<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