Question

I require some help creating a navigation bar in jQuery, If you check out the JS fiddle you should understand what effect I am trying to get. I’ve got it doing what I want apart from when you press on a dublink (I don’t want it to slide up when a sublink is clicked)

Cheers for any help

Answer 1

First of all, you will only want to bind the click event to the first row of children, where as you specify to bind it to all li elements that exist within your root ul.

Second, you will probably want to bind the click event to the a element, as a click on any of the children that exists within the first row of li elements (where you want the click event to be bound to) will trigger that exact same click event. This is due to the fact that you actually did click the li via one of it’s childrens.

Let’s see if this piece of re-written code can get you started:

http://jsfiddle.net/Ay6Xs/10/

(I did some HTML rewriting as well, so applied some copy-pasta)

Here’s the code from jsfiddle:

$(document).ready(function()
{
    // hides all admin control elements (drop down)
    $("#navigation_bar ul").hide();

    // Only bind click handler to direct li > a children
    $("#navigation_bar > li > a").click(function(e)
    {
        // Slide up every single ul
        $("#navigation_bar ul").slideUp();

        $(this).siblings()
            .stop()
            .slideToggle();

     });
});

HTML:

<ul id="navigation_bar">
    <li>
        <a id="database" href="javascript:void(0)">
            <img class="icon" src="images/icon/homeico.png"/>
            Dashboard
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/mailico.png"/>
            Messages
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/homeico.png"/>
            Dashboard
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/mailico.png"/>
            Messages
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/homeico.png"/>
            Dashboard
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/mailico.png"/>
            Messages
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
</ul>