Grow your CSS skills. Land your dream job.

Best practice: Remove active state from dropdown menu

  • # June 29, 2012 at 6:00 am

    Hi,
    I am searching for the best way to remove the active state from a dropdown menu that appears when a user clicks a certain button. I use jQueries toggleClass method to show/hide the menu on click. But what about removing the active class when the user clicks somewhere else on the page? I prepared a jsfiddle for you to illustrate my question: http://jsfiddle.net/RU83L/.

    A solution that comes to my mind is to always remember the last element clicked. Then I could use $(document).click() to remove my “active” class from the element clicked lately. I am just wondering whether there is a cleaner solution?

    Greeting,
    Daniel

    # June 29, 2012 at 6:30 am

    Well, instead of going through all the trouble to remember the last item clicked, why not just check to see if any element is currently active, then hide as necessary? It is a quick and dirty, but effective method.

    http://codepen.io/pen/7285/1

    # June 29, 2012 at 12:22 pm

    That is indeed a better solution than remembering the last element clicked. Thank you kgscott.

    I adapted your solution so a click on the document removes the “active” class on the button. You have to keep event bubbeling in mind though. Without event.stopPropagation(); both handlers would be fired in sequence, resulting in an immediate removal of the active class (document handler is fired second) just after its addition (button handler is fired first).

    http://jsfiddle.net/RU83L/4/

    However, could this be refered to as best practise? Now every click causes a query for “.dropdown-button.active” within the DOM, right?

    # June 29, 2012 at 11:20 pm

    Yes it would, so to combat $('.dropdown-button.active').removeClass("active"); being fired to the DOM every time the document is clicked, we can use the following simple remedy:

    http://jsfiddle.net/LCk6N/

    :)

    # July 2, 2012 at 3:36 am

    Hm, maybe I misunderstood what jQuery() actually does. I thought it searches the DOM using the given selector and returns a set of fitting jQuery objects. If that is true $('.dropdown-button.active').hasClass("active") will cause a search in the DOM just as $('.dropdown-button.active').removeClass("active") does. So a DOM search will be performed in both solutions when a click on the document is registered (in your example even twice).

    Or am I missing something elemental?

    # July 2, 2012 at 12:23 pm

    My understanding is that if you cache $(‘.dropdown-button.active’) as a variable, that will prevent jQuery from diving back into the DOM.

    http://jsfiddle.net/mGAs4/2/

    # July 2, 2012 at 12:32 pm

    Yes, but as far as best practice, where is the logic in trying to remove an element that doesn’t exist, unless it exists…but it wouldn’t hurt to cache it anyhow i suppose.

    # July 3, 2012 at 4:34 am

    Maybe not a bad idea to cache all .dropdown-buttons first and to use these as context for new .active queries within $(document).click().

    http://jsfiddle.net/mGAs4/3/

    Currently I do not see a better/easier solution. Thank you for your thoughts!

    # July 3, 2012 at 5:15 pm

    We do something similar with a navigation bar. But we test to see if you are clicking inside first.


    //Hide the Header Tool Bar when you click out
    var mouse_is_inside_toolbar = false;

    $('.global-nav').hover(function(){
    mouse_is_inside_toolbar=true;
    }, function(){
    mouse_is_inside_toolbar=false;
    });

    $("body").mouseup(function(){
    if(! mouse_is_inside_toolbar) {
    hide_global_nav();
    }
    });
    # July 5, 2012 at 10:28 am

    I tried to apply you solution to my example where more than one button could appear within the DOM. Don’t know if it is worth the effort though, it just feels cumbersome.

    Solution 1: Remembering the previously clicked button
    http://jsfiddle.net/mGAs4/4/

    Solution 2: Removing active states recklessly
    http://jsfiddle.net/mGAs4/5/

    I think this topic is not really interesting in terms of performance, but I was just wondering how others would approach this problem.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".