jQuery Menu is collapsing on submenu click

Question

I'm trying to get a jquery slide menu working, but I'm out of ideas right now. How can I stop the menu collapsing when clking on a submenu entry?

Here's what I've got so far - js-part, navigation code, and finally the css part that is relevant:

    <script type="text/javascript">
        $(document).ready(function() {
         $('ul .sub').hide();
         $("li:has(.sub)").click(function() {
            $("ul", this).toggle('slow');
        });
    </script>

    <nav id="nav" class="nav">
        <ul>
            <li class="current"><a href="#a">menu1</a></li>
            <li><a href="#b">menu2</a>
                <ul class="sub">
                    <li><a href="#ba">sub2a</a></li>
                    <li><a href="#bb">sub2b</a></li>
                    <li><a href="#bc">sub2c</a></li>
                </ul>
            </li>
            <li><a href="#c">menu3</a></li>
            <li><a href="#d">menu4</a>
                <ul class="sub">
                    <li><a href="#da">sub4a/a></li>
                        <li><a href="#db">sub4b</a></li>
                </ul>
            </li>
        </ul>
    </nav>

And here's the css:

 .nav li {
    list-style:none;
    line-height: 30px;  
 }

 .nav a:link, .nav a:visited{
    color:#333 !important;
    text-decoration:none;
 }

 .nav a:hover {
    color:#9bb710;
    text-decoration:none;
 }

 .current a:link, .current a:hover, .current a:visited {
    color:#9bb710 !important;
 }

 .sub {
    color:#333 !important;
    text-decoration:none;
    font-size: 14px;
    margin-left: 15px;
    line-height: 22px;
 }

Can you post your CSS Code too?

Subedi Kishor
– Subedi Kishor

2013-06-07 08:18:02 +00:00
Commented Jun 7, 2013 at 8:18 — Subedi Kishor
– Subedi Kishor, Commented Jun 7, 2013 at 8:18
Hi Kishor, i've edited the first post and added the css.

Dublay
– Dublay

2013-06-07 08:21:24 +00:00
Commented Jun 7, 2013 at 8:21 — Dublay
– Dublay, Commented Jun 7, 2013 at 8:21

mishik · Accepted Answer · 2013-06-07 08:27:13Z

2

This is happening due to event propagation: when you click on a subitem, "click" event is propagated up to the container "li".

You can prevent this by adding:

$("li").click(function(event) {
    event.stopPropagation();
});

Here's a jsfiddle example: http://jsfiddle.net/EWXPy/

answered Jun 7, 2013 at 8:27

mishik

10k9 gold badges48 silver badges69 bronze badges

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

5 Comments

Dublay Over a year ago

Is it possible to collapse the submenu when clicking on another main menu? Acutally it stays expanded.

Dublay Over a year ago

Awesome - thank your very much!!!just one thing. Can I add a class "subcurrent" to the active submenu?

mishik Over a year ago

You mean like this? $("ul", this).addClass("subcurrent").toggle('slow');

Dublay Over a year ago

Hi - close: I need it to the sub <li>-Element, like sub2a.

Dublay Over a year ago

$(".subelement").click(function(){ $(".subelement").removeClass('subcurrent'); $(this).addClass("subcurrent"); - not sure if this is correct, but it works. If anyone has a better idea I'm thankfull. Thanks so far!

veelen · Accepted Answer · 2013-06-07 08:24:39Z

1

You forgot closing brackets in your script:

It has to be like this:

<script type="text/javascript">
        $(document).ready(function() {
         $('ul .sub').hide();
         $("li:has(.sub)").click(function() {
            $("ul", this).toggle('slow');
        });
});
</script>

answered Jun 7, 2013 at 8:24

veelen

1,92419 silver badges26 bronze badges

Comments

maximkou · Accepted Answer · 2013-06-07 08:20:41Z

0

$("li:has(.sub)").click(function(e) {
    if ($(e.target).parents('.sub').length) return false;

    $("ul", this).toggle('slow');
});

answered Jun 7, 2013 at 8:20

maximkou

5,3421 gold badge23 silver badges41 bronze badges

Collectives™ on Stack Overflow

jQuery Menu is collapsing on submenu click

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related