Why does ul not open after applying window.click method?

I have an ul inside another ul which works smoothly. The open list closes by clicking anywhere in window, but after that, the ul does not open on click. It begins to work again only after refreshing the page. Could anyone please help me out?

    <div id="exercise">

        <ul class="drop">

            <li> <a> MODALS </a>

                <ul class="sub sub0">

                    <li> <a href="#"> Modals - I </a> </li>
                    <li> <a href="#"> Modals - II </a> </li>

                </ul>

            </li>


            <li> <a> NON-FINITE </a>

                <ul class="sub sub1">

                    <li> <a href="#"> Infinitive </a> </li>
                    <li> <a href="#"> Participle </a> </li>
                    <li> <a href="#"> Gerund </a> </li>

                </ul>

            </li>


            <li> <a> CLAUSE </a>

                <ul class="sub sub2">

                    <li> <a href="#"> Noun Clause</a> </li>
                    <li> <a href="#"> Adjective Clause </a> </li>
                    <li> <a href="#"> Adverb Clause </a> </li>

                </ul>

            </li>

        </ul>

    </div>

</div>


       $('document').ready(function() {

        // Index Menu - Showing and Hiding Tests Lists //

        $('.drop>li:eq(0)').click(function() {

            $('.sub0').slideToggle(500);

            $(this).siblings('li').find('ul').slideUp();

        });

        $('.drop>li:eq(1)').click(function() {

            $('.sub1').slideToggle(500);

            $(this).siblings('li').find('ul').slideUp();

        });

        $('.drop>li:eq(2)').click(function() {

            $('.sub2').slideToggle(500);

            $(this).siblings('li').find('ul').slideUp();

        });


        // Close all menu lists on clicking outside //

        $(document).click(function(event) {

            if ($(event.target).closest('.drop').length == 0) {

                $('.sub li').slideUp();

                $(this).unbind(event);

            }

        });

    });

Hi @tarunrathore03041980, you’re actually unbind()ing the event handler after the first click here:

$(this).unbind(event);

After removing that line it should work. BTW you can simplify your code a bit by handling the click events generically, rather than explicitly adding a handler to each list item:

$('.drop > li').click(function () {
    $('.sub', this).slideToggle(500)
    $(this).siblings('li').find('ul').slideUp()
})
1 Like

Sir, I have made the corrections suggested by you, but the problem still exists.

There is no problem when you start off by clicking on one of the menu headings.
There is a problem when you start by clicking on the background.

Currently the LI elements are being slid up, but nothing is sliding them down.

1 Like

It works for me though…

https://jsfiddle.net/megapop/qb2xsoyt/

1 Like

I thought that, then read his comment more closely and found I was wrong.

1 Like

@m3g4p0p Try this experiment. With a submenu open, click somewhere on the background to close all of the submenus, then try and open a submenu. The problem can then be experienced.

2 Likes

Ah yes you’re right… so @tarunrathore03041980 the problem is that you’re toggling the submenus on click, but when clicking the background you’re sliding up the submenu items. Hence, toggling the submenus will have no visible effect subsequently.

So you’ll also have to change

$('.sub li').slideUp()

to

$('.sub').slideUp()

inside the document click handler (I have updated the fiddle).

2 Likes

Thanks a lot to both of you. The problem is fixed. Please let me know how I can serve the forum in small ways.

2 Likes

Well you’re always welcome to contribute. :-)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.