Jquery + css dropdown menu issue

Question

I have a bit of trouble as i do not really use jquery a lot neither do i have a lot of experience with javascript but i found a good working menu that looks pretty good:

jQuery(window).load(function() {

    $("#nav > li > a").click(function (e) { 
        if ($(this).parent().hasClass('selected')) {
            $("#nav .selected div div").slideUp(100);
            $("#nav .selected").removeClass("selected"); 

        } else {
            $("#nav .selected div div").slideUp(100); 
            $("#nav .selected").removeClass("selected");

            if ($(this).next(".subs").length) {
                $(this).parent().addClass("selected"); 
                $(this).next(".subs").children().slideDown(200);
            }
        }
        e.stopPropagation();
    }); 

    $("body").click(function () { 
        $("#nav .selected div div").slideUp(100); 
        $("#nav .selected").removeClass("selected");
    }); 

});

The menu is as simple as this:

<li><a href="#">Tutorials</a>
                <div class="subs">
                    <div>
                        <ul>
                            <li><h3>Submenu #1</h3>
                                <ul>
                                    <li><a href="#">Link 1</a></li>
                                    <li><a href="#">Link 2</a></li>
                                    <li><a href="#">Link 3</a></li>
                                    <li><a href="#">Link 4</a></li>
                                    <li><a href="#">Link 5</a></li>
                                </ul>
                            </li>
                            <li><h3>Submenu #2</h3>
                                <ul>
                                    <li><a href="#">Link 6</a></li>
                                    <li><a href="#">Link 7</a></li>
                                    <li><a href="#">Link 8</a></li>
                                </ul>
                            </li>
                            <li><h3>Submenu #3</h3>
                                <ul>
                                    <li><a href="#">Link 9</a></li>
                                    <li><a href="#">Link 10</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

What i added is a simple login tab that expands and shows you the username and password input but with the current jquery it unselects the parent and it slides back up when i select the input fields.

My question is what do i need to add (or remove) to stop it from sliding up when i press the input fields (and submit button)

Help is much appreciated, Cheers!

Am I interpreting the question right: your form elements are part of the dropdown? Maybe children of the lis? — jamesplease
– jamesplease, Commented May 29, 2013 at 1:35
Part of it but no not children they replace the links so the whole <li><a href="#">Link 9</a></li> becomes <input type="text" placeholder="Username" id="username" /> — MirroredStance
– MirroredStance, Commented May 29, 2013 at 1:39

Tobias Baumeister · Accepted Answer · 2013-05-29 01:37:27Z

2

I might be wrong, but I think your mistake is right here:

 $("body").click(function () { 
        $("#nav .selected div div").slideUp(100); 
        $("#nav .selected").removeClass("selected");
    });

Since the input-field is also part of your body, it calls this function when it is clicked.

answered May 29, 2013 at 1:37

Tobias Baumeister

2,1573 gold badges21 silver badges40 bronze badges

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

1 Comment

MirroredStance Over a year ago

I checked it and it was the part that stopped it from closing

Nick · Accepted Answer · 2013-05-29 01:45:34Z

1

You need to handle the click event of the login form input boxes to stop the event propagating to the body.

$('form').on('click', 'input', function(e) {
    e.stopPropagation();
});

answered May 29, 2013 at 1:45

Nick

1461 silver badge7 bronze badges

1 Comment

MirroredStance Over a year ago

Uhm, what i was looking for is to just stop it from sliding back up when someone clicks the input fields but still slide it back up when someone clicks on the body, when i pasted this code above the body function it works but it wont slide anything back up when i click the body and when i paste it below the body function it doesnt work at all? I really am horrible at jquery.. Cheers for the help though

Community · Accepted Answer · 2017-05-23 11:50:11Z

0

Just add this line :

$('#nav').click(function(e){e.stopPropagation()})

Tobias Baummeister is right.

You are using e.stopPropagation() already but on the first level of navigation. Add it to the entire ul and your problem is solved.

Fiddle : http://jsfiddle.net/Adrdx/

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered May 29, 2013 at 2:17

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Collectives™ on Stack Overflow

Jquery + css dropdown menu issue

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related