CODEWITHSUNDEEP
javascriptjquerycssmenu
Peter
Peter

Reputation: 2414

Dropdown submenu issue

I´m having a problem with a Submenu.

I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE

Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.

But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.

Anyone can help me?

Here is my code

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){

$(".menu .expanded .menu ").hide(); 



    $("li:has(ul)").click(function() {
    $(".menu .expanded .menu ").hide(); 
        $("ul", this).toggle('fast');
    });

});

    </script>
    </head>


    <body>

    <ul class="menu">
        <li class="expanded">One
                <ul class="menu">
                    <li>One 1</li>
                    <li>One 2</li>
                    <li>One 3</li>
                    <li>One 4</li>
                </ul>
            </li>

        <li class="expanded">Two
                <ul class="menu">
                    <li>Two 1</li>
                    <li>Two 2</li>
                    <li>Two 3</li>
                    <li>Two 4</li>
                </ul>
            </li>

        <li class="expanded">Three
                <ul class="menu">
                    <li>Three 1</li>
                    <li>Three 2</li>
                    <li>Three 3</li>
                    <li>Three 4</li>
                </ul>
            </li>
    </ul>
</body>

Thanks a lot! I am new :D

Upvotes: 1

Views: 81

Answers (1)

Quentin Roger
Quentin Roger

Reputation: 6538

I only removed one line :

$(".menu .expanded .menu ").hide();

You can check if its the expected behavior in my snippet

$(document).ready(function() {
  var previousTarget = null;
  $("ul", "li").toggle('fast');
  $("li:has(ul)").click(function() {
    $(".menu .expanded .menu").hide('fast');
            
    if (this === previousTarget && $(this).children().css('display')!='none') {
      $(this).children().hide('fast');
    } else {
      $(this).children().show('fast');
    }
    previousTarget = this;
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

    <ul class="menu">
        <li class="expanded">One
                <ul class="menu">
                    <li>One 1</li>
                    <li>One 2</li>
                    <li>One 3</li>
                    <li>One 4</li>
                </ul>
            </li>

        <li class="expanded">Two
                <ul class="menu">
                    <li>Two 1</li>
                    <li>Two 2</li>
                    <li>Two 3</li>
                    <li>Two 4</li>
                </ul>
            </li>

        <li class="expanded">Three
                <ul class="menu">
                    <li>Three 1</li>
                    <li>Three 2</li>
                    <li>Three 3</li>
                    <li>Three 4</li>
                </ul>
            </li>
    </ul>
</body>

Upvotes: 2

Related Questions