CODEWITHSUNDEEP
jquerypreventdefault
ngplayground
ngplayground

Reputation: 21617

disabling click for main menu items not submenu jquery

HTML

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>

            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>

        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>

            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>

    </li>
    <li>
        <a href="#">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>

            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>

            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>

            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>

            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>

        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>

        </ul>
    </li>
</ul>

jQuery

$('#nav li a').click(function(e){
    e.preventDefault();
});

Trying to disable clicking on main menu items such as About, Services etc where they have a drop down. Using the above code it just disables all my links.

Upvotes: 0

Views: 4358

Answers (3)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

To disable just the top level, do this...

$('#nav > a').click(function(e){
    e.preventDefault();
});

Upvotes: 4

bipen
bipen

Reputation: 36531

try this

$('#nav li > a').click(function(e){
  -----^-- need a space here... or else it will search for id="navli" ;
   e.preventDefault();

});

updated

use siblings('ul') to find ul inside it... check length if greater than 0 thn it has dropdown.. no need to add an extra class...

try this

$('#nav li > a').click(function(e){
     if($(this).siblings('ul').length > 0){
         e.preventDefault();
     }
});

fiddle here

Upvotes: 1

Vince V.
Vince V.

Reputation: 3143

Give your top level links the class not-clickable and add this script:

$('.not-clickable').click(function(e){
    e.preventDefault();
});

If you have a dynamic menu, try to determine if there is a submenu, if it exists add the class to your top level element.

edit: By using a .not-clickable class you are also better off for the future. If #nav li ever becomes #nav2 li you need to change your javascript too.

Upvotes: 3

Related Questions