Question

我有以下代码：

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

当你单击其中一个上面的li（A，AA，AAA）时，我希望它切换它下方的li，但它没有那样做

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

有什么想法吗？

感谢

多伦

Answer 1

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

Answer 2

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

Answer 3

您的缩进使您认为ul是li的孩子。但是，情况并非如此，因为ul s根本没有包含在父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>

Answer 4

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

jquery ul切换问题

4 个答案: