Question

为什么这个jQuery代码不起作用？我使用最新的Mozilla Firefox和谷歌Chrome版本。我不知道如何解决这个问题。

    <!DOCTYPE html>
<html>
    <head>
        <style>
            ul > ul {display: none;}
        </style>
    </head>
    <body>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
        $( "li" ).click(function() {
            $( "ul > ul" ).css( "display", "inline" );
        });
    </script>
    <ul>
        <li>Capitolo1</li>
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragrafo 2</li>
                <li>Paragrafo 3</li>
            </ul>
        <li>Capitolo2</li>
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragafo 2</li>
                <li>Paragrafo 3</li>
            </ul>
        <li>Capitolo3</li>
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragafo 2</li>
                <li>Paragrafo 3</li>
            </ul>
        </ul>
        <!-- Questo è un commento -->
    </body>
</html>

非常感谢！

Answer 1

当你在那时编写jquery代码时，你需要将代码写入document.ready（），如下所示。

$(document).ready(function () {
    $( "li" ).click(function() {
            $( "ul > ul" ).css( "display", "inline" );
        });
});

我希望这会对你有所帮助。

Answer 2

$(document).ready(function () {
        $( "ul > li:nth-child(2)" ).click(function() {
            $( ".secondo" ).css( "display", "block" );
        });
    });

此代码选择第一个li下的第二个孩子。你需要选择第3个和第5个孩子。

    $(document).ready(function () {
        $( "ul > li:first-child" ).click(function() {
            $( ".primo" ).css( "display", "block" );
        });
    });

    $(document).ready(function () {
        $( "ul > li:nth-child(3)" ).click(function() {
            $( ".secondo" ).css( "display", "block" );
        });
    });

    $(document).ready(function () {
        $( "ul > li:nth-child(5)" ).click(function() {
            $( ".terzo" ).css( "display", "block" );
        });
    });

这就是为什么你的代码不起作用的原因。但我建议做这样的事情。

<!DOCTYPE html>
<html>
<head>
.hidden {
    display:none;
    list-style:none
}
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
    $(".toggle").on("click", function() {
    $(this).next().show();
    });
});
</script>
<ul>
    <li class="toggle">Capitolo1</li>
    <li class="hidden">
        <ul>
            <li>Paragrafo 1</li>
            <li>Paragrafo 2</li>
            <li>Paragrafo 3</li>
        </ul>
    </li>
    <li class="toggle">Capitolo2</li>
    <li class="hidden">
        <ul>
            <li>Paragrafo 1</li>
            <li>Paragafo 2</li>
            <li>Paragrafo 3</li>
        </ul>
    </li>
    <li class="toggle">Capitolo3</li>
    <li class="hidden">
        <ul>
            <li>Paragrafo 1</li>
            <li>Paragafo 2</li>
            <li>Paragrafo 3</li>
        </ul>
    </li>
    </ul>
    <!-- Questo è un commento -->
</body>

注意内部ul是如何嵌套在li而不是ul root中的。这是有效的HTML。下次你提出问题时，请说明应该采取什么行为。

Answer 3

您好，您的代码听到它正常工作......

＆＃13;

    $('.demo1 li').click(function() {
        //$(this).next('ul').slideToggle();
         $(this).next('ul').css( "display", "inline" );
    });

$('.demo2 li').click(function() {      
        $(this).children('ul').slideToggle();
    });

＆＃13;

 ul  ul {display: none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
   
    <ul class="demo1">
        <li>Capitolo1</li>
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragrafo 2</li>
                <li>Paragrafo 3</li>
            </ul>
        <li>Capitolo2</li>
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragafo 2</li>
                <li>Paragrafo 3</li>
            </ul>
        <li>Capitolo3</li>
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragafo 2</li>
                <li>Paragrafo 3</li>
            </ul>
        </ul>

  <ul class="demo2">
        <li>Capitolo1
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragrafo 2</li>
                <li>Paragrafo 3</li>
            </ul></li>
        <li>Capitolo2
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragafo 2</li>
                <li>Paragrafo 3</li>
            </ul></li>
        <li>Capitolo3
            <ul>
                <li>Paragrafo 1</li>
                <li>Paragafo 2</li>
                <li>Paragrafo 3</li>
            </ul>
        </ul></li>

＆＃13;

为什么这个jQuery脚本不起作用？

3 个答案: