使用 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 代码使所有下拉链接也无法点击。

如果有人知道如何在悬停“图片”链接时删除状态栏 URL，那就太好了。但我认为这不可能在 Safari 和 Firefox 等现代浏览器中实现？

谢谢！

Answer 1

我不知道您对 Wordpress 有什么控制，但您遇到了这个问题，因为所有内容都包含在标题列表项 (page-item-3) 中，并且您正在取消对该项目的点击。如果您可以将类应用于标题链接本身，则可以直接将 jQuery 应用于该链接。

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

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

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

Answer 2

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

*****或使用 CSS*****

.unclickable {
   z-index:-1;
}


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

Answer 3

只需将 href 属性值替换为 #。这样，当用户点击它时，页面会转到#，这与他们所在的页面相同，并且没有任何反应。保留您编写的 CSS，以便在悬停时不会出现手形指针，但删除 jQuery 代码。

使用 jQuery：

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

Answer 4

试试这个：

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

这将禁用列表中的所有第一个链接，而无需类名。

Answer 5

我用这个：

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