Making parent link unclickable in a drop-down menu with jQuery

Question

Hello everyone!

I have a drop-down menu that are dynamically added through WordPress. It looks like this:

Pictures
    Sea
    Forest
    City

"Sea", "Forest" and "City" is categories with "Pictures" as parent category.

My question is:

How do I make the "Pictures" category unclickable?

I did this with jQuery:

$(document).ready(function(){
    //Make parent links unclickable
    $(".page-item-3").click(function(){ 
     return false;
    });
});

...and this with CSS:

li.page-item-3 a {
    cursor:default;
}

.page-item-3 ul li a {
    cursor: pointer;
}

Markup looks like this:

<div id="menu" class="jqueryslidemenu">
    <ul>
     <li class="cat-item cat-item-1 current_page_item"><a href="http://blabla" title="Blabla">Blabla</a></li>
     <li class="page_item page-item-2"><a href="http://blabla" title="Blabla">Blabla</a>
      <ul>
       <li class="page_item page-item-28"><a href="http://blabla" title="Blabla">Blabla</a></li>
       <li class="page_item page-item-30"><a href="http://blabla" title="Blabla">Blabla</a></li>
       <li class="page_item page-item-39"><a href="http://blabla" title="Blabla">Blabla</a></li>
      </ul>
     </li>
     <li class="page_item page-item-3"><a href="http://blabla" title="Blabla">Blabla</a>
      <ul>
       <li class="page_item page-item-5"><a href="http://blabla" title="Blabla 1">Blabla 1</a></li>
       <li class="page_item page-item-7"><a href="http://blabla" title="Blabla 2">Blabla 2</a></li>
       <li class="page_item page-item-9"><a href="http://blabla" title="Blabla 3">Blabla 3</a></li>
       <li class="page_item page-item-11"><a href="http://blabla" title="Blabla 4">Blabla 4</a></li>
       <li class="page_item page-item-13"><a href="http://blabla" title="Blabla 5">Blabla 5</a></li>
      </ul>
     </li>
     <li class="page_item page-item-15"><a href="http://blabla" title="Blabla">Blabla</a>
      <ul>
       <li class="page_item page-item-222"><a href="http://blabla" title="Blabla">Blabla</a></li>
       <li class="page_item page-item-224"><a href="http://blabla" title="Blabla">Blabla</a></li>
       <li class="page_item page-item-226"><a href="http://blabla" title="Blabla">Blabla</a></li>
      </ul>
     </li>
     <li class="page_item page-item-17"><a href="http://Blabla" title="Blabla">Blabla</a></li>
     <li class="page_item page-item-36"><a href="http://Blabla" title="Blabla">Blabla</a></li>
    </ul>
</div>

This almost works But the jQuery code makes all the drop-down links unclickable too.

It would be great if anyone knows how to remove the status bar url while hover the "Pictures" link. But I don't think that is possible to make in moderns browsers such as Safari och Firefox?

Thanks!

Answer 1

just replace the href attribute value with #. That way when the user clicks on it, the page goes to #, which is the same page they are on, and nothing happens. Keep the CSS you wrote so the hand pointer does not appear when they hover it, but remove the jQuery code.

Using jQuery:

$(".page-item-3>a").attr("href", "#")

Answer 2

I don't know what control you have because of Wordpress but you're having this problem because everything is contained in the title list item (page-item-3) and you're cancelling the click on this item. If you can apply a class to the title link itself, you can apply the jQuery to that directly.

Unfortunately you can't say ".page-item-3 a" because this apply to all links in the list.

Re-Edit - This should select the first link in the list and cancel the click value of that. You may need to apply this for each 'title' link you have.

$(".page-item-3 a:first").click(function() {
   return false;
}

Answer 3

Try this:

$(document).ready(function(){
    //Make parent links unclickable
    $("div > ul > li > a").click(function(){ 
        return false;
    });
});

This will disable all the first links in your list without needing the class name.

Answer 4

I use this :

$j = jQuery.noConflict(); $j(document).ready(function(){ //Make parent links unclickable $j("div[id='nav'] > ul > li > a ").removeAttr("href"); });