CODEWITHSUNDEEP
jquery
BarbaN3rd
BarbaN3rd

Reputation: 17

Why this jQuery script doesn't work?

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!

Upvotes: -1

Views: 60

Answers (3)

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

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>

Upvotes: 0

user4723675
user4723675

Reputation: 1

$(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.

Upvotes: 0

lalitpatadiya
lalitpatadiya

Reputation: 720

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.

Upvotes: 2

Related Questions