使用jQuery在下拉菜单中使父链接不可点击

Question

我有一个通过WordPress动态添加的下拉菜单。它看起来像这样：

Pictures 
    Sea 
    Forest 
    City 

“海”，“森林”和“城市”为类别与“图片”作为父类。

我的问题是：

我如何使“图片”类别无法点击？

我这样做与jQuery：

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

...这与CSS：

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

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

标记看起来是这样的：

<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> 

这几乎工程但jQuery代码使得所有的下拉链接都不可点击。

如果有人知道如何在悬停“图片”链接的同时删除状态栏网址，那将会很棒。但我认为在Firefox或Firefox等现代浏览器中不可能做到这一点？

谢谢！

Answer 1

我不知道是什么的控制，你有因为WordPress的，但因为一切都包含在标题列表项目（第项-3）你遇到这个问题，您将取消点击此项目。如果你可以将一个类应用到标题链接本身，你可以直接应用jQuery。

很遗憾，您不能说“.page-item-3 a”，因为这适用于列表中的所有链接。

重新编辑 - 这应该选择列表中的第一个链接并取消它的点击值。您可能需要为每个“标题”链接应用此功能。

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

Answer 2

只是用＃替换href属性值。这种方式当用户点击它时，页面会转到＃，它与它们在同一页面上，并且没有任何反应。保留你写的CSS，这样当鼠标悬停时手形指针不会出现，但是移除jQuery代码。

使用jQuery：

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

Answer 3

试试这个：

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

这将禁用清单中的所有第一连杆无需类名。

Answer 4

我用这个：

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

Answer 5

$(".page-item-3").children("a").click(function(e) { 
    e.preventDefault(); 
}); 

*****或CSS *****

.unclickable { 
    z-index:-1; 
} 


$(".page-item-3").children("a").addClass("unclickable");