Need to single out menu drop down item using Jquery

Question

I have managed to write a simple script for a drop down menu but I am having issues making it so that only the section under the menu item that is clicked drops down in stead of all of the sub menus. I have a Jsfiddle.

<ul id="nav">
<li class="parent"><a class="nav-top" href="#">Web Design</a>
    <ul class="sub-nav">
        <li><a class="nav-top" href="#">Self Storage Websites</a></li>
        <li><a class="nav-top" href="#">Responsive Websites</a></li>
    </ul>
</li>
<li class="parent"><a class="nav-top" href="#">Internet Marketing</a>
    <ul class="sub-nav">
        <li><a class="nav-top" href="#">Real SEO</a></li>
        <li><a class="nav-top" href="#">PPC (Pay Per Click) Ads</a></li>
        <li><a class="nav-top" href="#">Social Media Marketing</a></li>
    </ul>
</li>
<li class="parent"><a class="nav-top" href="hosting.html">Website Hosting</a></li>
<li class="parent"><a class="nav-top" href="#">About Us</a>
    <ul class="sub-nav">
        <li><a class="nav-top" href="#">About EiD</a></li>
        <li><a class="nav-top" href="#">Careers</a></li>
    </ul>
</li>
<li class="parent"><a class="nav-top" href="hosting.html">Contact Us</a></li>

$(document).ready(function() {
$('.parent').click(function() {
    $('.sub-nav').toggleClass('visible');
});

});

#nav li {
    padding: 0;
    line-height: 48px;
    width: 100%;
    text-align: center;
    /*text-transform: uppercase;*/
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
}

.sub-nav {
    background: #e2e;
    display: block;
    overflow: hidden;
}

#nav ul.sub-nav {
    display: none;
}

#nav ul.visible {
    display: block;
}

Any info would be greatly appreciated. Thanks!

Use [`$('.sub-nav', this).toggleClass('visible');`](https://jsfiddle.net/tusharj/kh32wfcL/1/) — Tushar, Apr 07 '16 at 15:34
@Tushar yes I'm trying to set it up so that when one drop down is clicked the one that is currently opened will close in its place. — Patrick Sharer, Apr 07 '16 at 18:12

Reinstate Monica Cellio · Answer 1 · 2016-04-07T18:35:15.167

1

It's a straight-forward fix. You're selecting all .sub-nav, instead of just the the relevant one. Try this...

$(document).ready(function() {
    $('.parent').click(function() {
        $(this).find('.sub-nav').toggleClass('visible');
    });
});

If you want to toggle the clicked one, as well as close any other open ones then you'll need a little more...

$(document).ready(function() {
    $('.parent').click(function() {
        $(".parent").not(this).find(".sub-nav").removeClass("visible");
        $(this).find('.sub-nav').toggleClass('visible');
    });
});

edited Apr 07 '16 at 18:35

answered Apr 07 '16 at 15:33

Reinstate Monica Cellio

25,975
6
51
67

How about closing one drop down automatically that is open when clicking on another? – Patrick Sharer Apr 07 '16 at 17:56
1

I've modified it to suit. – Reinstate Monica Cellio Apr 07 '16 at 18:35
Thanks again! Your code has .removeClass("visible"); and it didn't work so I changed it to .removeClass('visible'); Using single quotes around visible and it worked fine at that point. – Patrick Sharer Apr 07 '16 at 18:53

score 1 · Answer 2 · answered Apr 07 '16 at 15:39

1

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav', this).toggleClass('visible');
    });
});

answered Apr 07 '16 at 15:39

Guillaume Serrat

165
8

1

I've upvoted because it will work, but `.find()` is preferable for performance. – Reinstate Monica Cellio Apr 07 '16 at 15:41
1

Thanks! Here's more info on [selecting descendant elements in jQuery](http://stackoverflow.com/questions/3177763/what-is-the-fastest-method-for-selecting-descendant-elements-in-jquery). – Guillaume Serrat Apr 07 '16 at 15:43
1

Ah things have changed (again)! `.children()` does make more sense really. – Reinstate Monica Cellio Apr 07 '16 at 15:56

Need to single out menu drop down item using Jquery

2 Answers2