Make only bullets clickable

Question

I'm working on a menu that is designed using an unordered list, with each list element containing a link to another page. However, I would also like to be able to click on each bullet point to open more subcategories that will also link to other pages.

Essentially, I would like to be able to click once on a link and have it go to the correct page, but I would also like to click on the bullet point and have it expand into the subcategories. I've been researching how to separate the bullet from the content of the li, but it doesn't seem to be working in my case, likely because my li contains a lot of subcategories. Here's an example:

<li id="m2l1" class="child">
    <a href="#">Y</a>
        <ul id="u11">
            <li class="gchild"><a href="#">Y.1</a></li>
            <li class="gchild"><a href="#">Y.2</a></li>
            <li class="gchild"><a href="#">Y.3</a></li>
            <li class="gchild"><a href="#">Y.4</a></li>
            <li class="gchild"><a href="#">Y.5</a></li>
            <li class="gchild"><a href="#">Y.6</a></li>
            <li class="gchild"><a href="#">Y.7</a></li>
            <li class="gchild"><a href="#">Y.8</a></li>
            <li class="gchild"><a href="#">Y.9</a></li>
        </ul>
</li>

Does anyone have any suggestions as to how to separate the bullet from the text in my case?

Here's the link: http://jsfiddle.net/stamblerre/XYp48/17/

Thank you!!!

Answer 1

Your HTML is invalid. You can't have div inside your ul. Moreover, you can greatly simplify your code by moving separate logic for each li into one generic handler.

Something like this:

Demo: http://jsfiddle.net/abhitalks/XYp48/18/

CSS:

ul {
    display: none;
    overflow: hidden;
}
ul:first-child {
    display: block;
}

JS:

$("li").on("click", function () {
    $(this).children("ul").slideToggle();
    return false;
});

Edit:

I deliberately left out checking of a because clicking the a would navigate to the respective pages (as mentioned in your question), so expand/collapse wouldn't matter.

However, as per your comment if you really want to remove a altogether from the handler, then you can use the event target to handle li without a. Something like this:

Demo 2: http://jsfiddle.net/abhitalks/XYp48/22/

JS:

$("li").on("click", function (e) {
    var $t = $(e.target); // get the event target as a jQuery object
    if (!$t.is('a')) { // check if the target is not an anchor
        $(this).children("ul").slideToggle();
        return false;
    }
    // otherwise if target is anchor, then do nothing
});