Home/ Questions/Q 8117599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:13:36+00:00

The script below works fine if 3 and 3.2 are not links but i

  • 0

The script below works fine if 3 and 3.2 are not links but i cant figure out how to get this to work while they are links.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - Test</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

<style>
ul{
list-style-type: none;
padding: 0;
margin-left: 0;
font-weight: bold;
}
</style>





<script type='text/javascript'>

$(document).ready(function() {
    $("#nav ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
    .click(function(e) {
        if (this == e.target) {
            $(this).children('ul').slideToggle('fast');
        }
    });
});


</script>


</head>
<body>
  <div id="nav">
    <ul>
        <li><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a>
            <ul>
                <li><a href="example.com">3.1</a></li>
                <li><a href="javascript:void(0)">3.2</a>
                    <ul>
                        <li><a href="example.com">3.2.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">4</a></li>
    </ul>

</div>


</body>


</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve cleaned up your code:

    HTML:

      <div id="nav">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a>
            <ul>
                <li><a href="example.com">3.1</a></li>
                <li><a href="#">3.2</a>
                    <ul>
                        <li><a href="example.com">3.2.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">4</a></li>
    </ul>

</div>​

    css:

    ul{
list-style-type: none;
padding: 0;
margin-left: 0;
font-weight: bold;
}

ul ul{
    display:none;
}

    jQuery:

    $(document).ready(function() {
    $('#nav ul li a[href="#"]').click(function(event) {
        event.preventDefault();
        $(this).siblings('ul').toggle();
    });
});​

    Demo:
    http://jsfiddle.net/PvQVY/

    • 0