4

I've homerolled a Javascript based nav bar (I want it to be click, not hover for mobile friendliness). I've tried to make the HTML, CSS, and Javascript as simple as possible.

I put a listener on the body to close the menu bars if you click anywhere else on the website. I'm trying to filter the listener so that it does not fire if you click on any part of the menu bar. This is to prevent the dropdowns from rolling back up when you click on an element in the dropdown.

I expect the below matcher to ONLY match items that are descendants of the top level menu element. Any advice on why this isn't working would be much appreciated.

EDIT: I understand that you can use an arbitrary function to evaluate the bubble coming up and decide on whether or not you should act on it, but I'm more interested in why the below .on() selector is not working the way I expect.

$("body").on("click", ":not(#menu *)", function (e) {
            $("#menu a").next().slideUp(DROP_DOWN_TIME);
        });

http://jsfiddle.net/auKzt/16/

HTML

<body>
    <div>HEADER</div>
    <ul id="menu" class="cf">
        <li><a href="#">FooafsdasiuhfauhfuahsdfFooaf sdasiuhfauhfuahsdfFooafsdasiuhfauhfuahsdf</a>

            <ul>
                <li><a href="#">Subitem asdasdasd 1 sadad</a>

                </li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        </li>
        <li><a href="#">Bar</a>

            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        </li>
        <li>Qux</li>
    </ul>
    <div>CONTENT</div>
    <div>FOOTER</div>
</body>

JAVASCRIPT

$(document).ready(function () {
    var DROP_DOWN_TIME = 200;
    //Setup hidden dropdowns
    $("#menu > li > a").next().toggle();
    //Hide or unhide dropdowns onclick
    $("#menu > li > a").click(function (e) {
        $("#menu a").next().not($(e.target).next()).slideUp(DROP_DOWN_TIME);
        $(e.target).next().slideToggle(DROP_DOWN_TIME);
        e.stopPropagation();
    });
    $("body").on("click", ":not(#menu *)", function (e) {
        $("#menu a").next().slideUp(DROP_DOWN_TIME);
    });
});

CSS

#menu {
    width: 900px;
    padding: 0;
    margin: 0;
}
/* Top level menu container */
 #menu li {
    background-color: aqua;
    border: 1px solid black;
    padding: 2px;
}
/* Top level menu items */
 #menu > li {
    display: inline-block;
    float: left;
    position: relative;
}
/* Submenu container */
 #menu > li > ul {
    position:absolute;
    padding: 0;
    margin: 0;
    top: 100%;
    left: -1px;
}
/* Submenu Items */
 #menu > li > ul > li {
    display: block;
    float: none;
    white-space: nowrap;
}
.cf:before, .cf:after {
    content:" ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}
6
  • you didn't specify a selector.. and :not is only a filter so what do are you expecting from this :not(#menu *)
    – wirey00
    May 20, 2013 at 18:58
  • @wirey It is a selector. It returns all elements that DO NOT match what's inside. api.jquery.com/not-selector
    – Jazzepi
    May 20, 2013 at 18:59
  • @Jazzepi - but it can't be used as a filter for a delegated event handler like that.
    – adeneo
    May 20, 2013 at 19:03
  • @adeneo You are incorrect. Check the solution provided by epascarello. It works as expected.
    – Jazzepi
    May 20, 2013 at 19:05
  • 2
    @adeneo I agree that the other options are better, and I would prefer using them, it's just that you said they can't be used, but they obviously can. Also, the OP was more or less asking why it didn't work, instead of looking for alternative (albeit a better one). As far as efficiency, I don't know either :)
    – Ian
    May 20, 2013 at 19:13

2 Answers 2

3

It is failing because the click is being caught on the menu element. The content inside is being caught.

You need to also add the menu element

$("body").on("click", ":not(#menu, #menu *)", function (e) {
                            ^^^^^^   
1
  • Winner winner chicken dinner. Thanks for answering the actual question :) <3
    – Jazzepi
    May 20, 2013 at 19:03
-1

Try this instead

$("body").on("click", function (e) {
     if( e.taget.id !== 'menu' && !$(e.target).closest('#menu').length) {
         $("#menu a").next().slideUp(DROP_DOWN_TIME);
     }
});
1
  • 1
    I was trying to be slick and use the .on()'s selector functionality. I am actually very interesting in knowing WHY it doesn't work the way I expect it to. I do understand that I can use an arbitrary function to filter the bubble, but I was hoping for something "cleaner".
    – Jazzepi
    May 20, 2013 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.