Why this jQuery script doesn't work?

Question

Why this jQuery code doesn't work? I'm using the lastest Mozilla Firefox and Google Chrome version. I don't know how to fix this porblem.

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

Thank you very much!

Not working means have you got any errors or not getting your expected output? — Sadikhasan
– Sadikhasan, Commented Mar 28, 2015 at 9:44

lalitpatadiya · Accepted Answer · 2015-03-28 09:48:58Z

2

Whenever you are writing jquery code at that time you need wirte code into document.ready() like bellow.

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

i hope this will help you.

edited Mar 28, 2015 at 9:48

answered Mar 28, 2015 at 9:43

lalitpatadiya

7207 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lalitpatadiya Over a year ago

@BarbaN3rd my code will really help you than please correct me.

lalitpatadiya Over a year ago

@BarbaN3rd on right hand side the correct arrow is their if my code will really help and my answer is correct than please correct it.

user4723675 · Accepted Answer · 2015-03-28 10:47:26Z

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

This code selects second child which is ul under first li. You need to select 3rd and 5th child.

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

That is why your code doesn't work. But I would suggest doing something like this instead.

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

Notice how inner ul is nested in li instead of ul root. This is valid html. Next time you ask question please explain what should be desired behaviour.

You don't have to wrap in multiple DOM ready handlers. One $(document).ready(function() {...}); is enough.

Mansukh Khandhar · Accepted Answer · 2015-03-28 10:57:37Z

Hi your code is hear it's working fine ...

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

$('.demo2 li').click(function() {      
        $(this).children('ul').slideToggle();
    });

 ul  ul {display: none;}

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

Collectives™ on Stack Overflow

Why this jQuery script doesn't work?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related