Question

I am using this tutorial

http://www.1stwebdesigner.com/css/create-sliding-navigation-menu-jquery/

this is the index.html file:

!DOCTYPE html> Jquery Sliding Navigation Menu

    <ul id='header_nav'>
        <li><img src="images/home-icon.png" /></li>
        <li>About Us</li>
        <li>Categories
            <ul>
                <li><a>Coding</a></li>
                <li><a>Freebies<span class="arrow-right"></span></a>
                    <ul>
                        <li><a>Icons<span class="items_num">5</span></a></li>
                        <li><a>Templates<span class="items_num">10</span></a></li>
                        <li><a>Fonts<span class="items_num">3</span></a></li>
                    </ul>
                </li>
                <li><a>Tutorial<span class="arrow-right"></span></a>
                    <ul>
                        <li><a>Icons<span class="items_num">5</span></a></li>
                        <li><a>Templates<span class="items_num">10</span></a></li>
                        <li><a>Fonts<span class="items_num">3</span></a></li>
                    </ul></li>
                <li><a>Web Design</a></li>
            </ul>
        </li>
        <li>Archive
            <ul>
                <li><a>Coding</a></li>
                <li><a>Freebies<span class="arrow-right"></span></a>
                    <ul>
                        <li><a>Icons<span class="items_num">5</span></a></li>
                        <li><a>Templates<span class="items_num">10</span></a></li>
                        <li><a>Fonts<span class="items_num">3</span></a></li>
                    </ul>
                </li>
                <li><a>Web Design</a></li>
            </ul>
        </li>
        <li>Contact</li>
        <li>Write For Us ?</li>
    </ul>



    <script>

        $(document).ready(function(){

            $("#header_nav > li ").addClass("level1");
            $("#header_nav  > li > ul > li ").addClass("level2");
            $("#header_nav  > li > ul > li > ul > li ").addClass("level3");

            $(".level1").live("hover",function(){

                $(".level1").removeClass("main_menu_hover");
                $(this).addClass("main_menu_hover");


                var numberofChildren = $(this).find("> ul").children().length;

                if(numberofChildren != 0){
                    // Section 1
                    $(".level1").removeClass("active_main_menu");
                    $(this).addClass("active_main_menu");

                    // Section 2
                    $(".level1").find("ul").css("display","none");
                    $(this).find(" > ul").css("display","block");

                    // Section 3
                    $(".level2").removeClass("active_first_element");
                    $(".level2").removeClass("active_last_element");
                    $(".level2").removeClass("active_only_element");

                    // Section 4
                    if(numberofChildren == 1){
                        $(this).find("ul li:first").addClass("active_only_element");
                    }else{
                        $(this).find("ul li:first").addClass("active_first_element");
                        $(this).find("ul li:last-child").addClass("active_last_element");
                    }

                    // Section 5
                    $(".level2 a").removeClass("sub_active");
                    $(".level2").removeClass("menu_hover");


                }else{
                    // Section 6
                    $(".level1").find("ul").css("display","none");
                    $(".level1").removeClass("active_main_menu");

                }

            });

            $(".level2").find(".arrow-right").attr("href","javascript:void(0);");

            $(".level2 > a").live("hover",function(e){
                $("li").removeClass("menu_hover");
                $(this).parent().addClass("menu_hover");
                e.preventDefault();
            });

            $(".level2 a").live("click",function(){
                $("li").removeClass("menu_hover");

                if($(this).hasClass("sub_active")){
                    $(this).removeClass("sub_active");
                    $(".level2 > ul").slideUp();
                }else{
                    $(".level2 ul").slideUp();
                    $(".level2 a").removeClass("sub_active");
                    $(this).addClass("sub_active");
                    $(this).parent().find("ul").slideDown();
                }
            });





            $(".level3 a").live("hover",function(){
                if(!($(this).parent().hasClass("accordian_element_hover"))){
                    $(this).parent().removeClass("level3").addClass("accordian_element_hover");
                }
            });
            $(".accordian_element_hover a").live("hover",function(){
                $(this).parent().addClass("level3").removeClass("accordian_element_hover");
            });


        });
    </script>

</body> </html>

I have been trying to figure out how to add a different click function to each of the drop dpwn elements.

I have used this:

$(".level2 a").live("click",function(){  
  return false;
});

and it works by adding the same function to every item in the drop down menu. I was wondering how to address each specific one?

Answer 1

If the content is static, you can use something like $('.level2 a:eq(0)'