Javascript jqueryul切换问题

我有以下代码：

        <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

B
C

AA

D
E

AAA

$（文档）.ready（函数（）{
$（'#reportType'）。子项（'li'）。单击（函数（）{
$（this.find（'li'）.toggle（）；
});
});

当你点击上面的一个li（A，AA，AAA）时，我想让它切换它下面的li，但它没有这样做

我知道它选择了正确的li，因为我设法隐藏了特定的li，而不是它下面的内容

有什么想法吗

谢谢

---

doron

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

---

|

您的

应该嵌套在

中，如下所示：

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

A

B
C


AA

D
E


AAA

$（文档）.ready（函数（）{
$（'#reportType'）。子项（'li'）。单击（函数（）{
$（this.find（'li'）.toggle（）；
});
});

你的缩进让人觉得

ul

s是

li

的后代。但是，情况并非如此，因为

ul

s根本没有包装在父

li

中

您可能需要与此类似的内容：

A

B
C


AA

D
E


AAA

需要将
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();
});


A

B
C


AA

D
E


AAA

$（'#reportType'）。子项（'li'）。单击（函数（）{
$（this.next（'ul'）.toggle（）；
});

工作演示
li
“子对象”不是父对象的子对象
li
。你的缩进有点误导人。A与Ul1处于相同的级别。是的，UL需要在LIUpdated中处理嵌套列表：）谢谢AlienWebguy
<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>

<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();
});