Drop down javascript issues

Question

Hello fellow stackoverflow users,

I seem to be having some issues trying to get my drop down menu to work and I'm pretty sure it is my javascript that isn't working properly. As of right now, with what I have - works when clicking the <li> element to open up the <ul> menu and stays in an active state, however, you have to click the <li> for it to close and the active state stays on rather than goes inactive like i need it too...So my questions at hand is where am I going wrong? I am still fairly new to javascript and any help would be greatly appreciated.

Requirements:

1.) on click make active and open menu

2.) either on click again on element or anywhere on page for that matter, menu closes and goes inactive.

This is what I have so far: DEMO

HTML:

<div class="top_l">
    <li>Nav <span>▼</span>

        <ul> <a href="#">Title</a>
 <a href="#">Title</a>
 <a href="#">Title</a>

        </ul>
    </li>
</div>

JS:

$(document).ready(function () {
    $('.top_l li').click(function () {
        $('.top_l li').addClass('active');
        $('.top_l li ul').slideToggle();
    });
});

CSS:

.top_l {
    width: 340px;
    height: 60px;
    float: left;
}
.top_l li {
    height: 32px;
    padding: 8px 12px 0 12px;
    margin: 10px 0 0 6px;
    border: 1px solid transparent;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    float: left;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    list-style: none;
    color: #A4A4A4;
    font: 20px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 2px 2px 3px #000;
    position: relative;
    cursor: pointer;
}
.top_l li span {
    font: 14px Arial, Helvetica, sans-serif;
}
.top_l li:hover, .top_l li.active {
    color: #FFF;
    border: 1px solid #444;
}
.top_l li ul {
    width: 120px;
    height: 120px;
    background: #222;
    border: 1px solid #444;
    -moz-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
    -webkit-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
    box-shadow: inset 0 0.1em 0.4em 0.1em #000;
    display: none;
    position: absolute;
    top: 22px;
    left: 4px;
}
.top_l li ul a {
    width: 118px;
    height: 28px;
    padding: 10px 0 0 0;
    background: red;
    float: left;
    color: #FFF;
    font: 14px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}

Magnus Engdal · Accepted Answer · 2013-12-18T19:48:41.317

1

You never remove the class on second click.

Check if it's active with .hasClass() and if so, remove it with .removeClass().

$('.top_l li').click(function () {
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
    $('.top_l li ul').slideToggle();
});

Edit

Second part of request, to make the list close when you click anywhere on the page. Try this:

$(document).ready(function () {
    $('.top_l ul').click(function (e) {
        $('.top_l ul').addClass('active');
        $('.top_l ul li').slideToggle();
    });

    $(document).click(function() {
        $('.top_l ul li').slideUp();
    });

    $('.top_l ul,.top_l li').click(function(e) {
        e.stopPropagation();
    });
});

edited Dec 18 '13 at 19:48

answered Dec 18 '13 at 18:41

Magnus Engdal

5,446
3
31
50

That works, but is there also a way to make it where if you click anywhere on the page, the `ul` closes as well rather than literally and only being able to click the `li` to close it? – user2732875 Dec 18 '13 at 18:44
Sure, you can do something like this: `$(document).click(function() {$('.top_l li ul').slideup()});` – Magnus Engdal Dec 18 '13 at 18:47
Have a look here for further information about it, like if you want to hide your `ul` if you click anywhere on the page except on the `ul` itself. http://stackoverflow.com/questions/714471/jquery-hide-element-when-clicked-anywhere-on-the-page – Magnus Engdal Dec 18 '13 at 18:49
How would I implement that, I tried using `$('.top_l li').click(function(e) { e.stopPropagation(); });` but that's not workin' – user2732875 Dec 18 '13 at 18:57
Put it on `$('.top_l ul')` instead, but on another note, you kind of have them in reverse order. `li` usually goes inside `ul`. – Magnus Engdal Dec 18 '13 at 19:06
I fixed the order of the `li` and `ul` - which btw, thank you for pointing that out - it was giving me some troubles with something else. But after I reversed that order of those two elements, that problem was solved...As for the initial issue, could you update your answer of where I would need that to make it work? Where rather than only clicking on the `ul` it closes, so if a user clicks anywhere on the page it will close? – user2732875 Dec 18 '13 at 19:11
Updated my answer with a possible solution. – Magnus Engdal Dec 18 '13 at 19:26
adding that just makes it open and close automatically after 1 click...lol – user2732875 Dec 18 '13 at 19:40
Thank so very much for all your help! I'll mark your answer as correct. From that last demo you provided in the comment, was almost perfect, I had to add a few more things to it to make it fully functional and work. Here is that demo if you want to take a gander at it ;) Demo: http://jsfiddle.net/A7urV/21/ – user2732875 Dec 18 '13 at 20:15

Drop down javascript issues

1 Answers1