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

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

Pictures
    Sea
    Forest
    City

<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实现了这一点：

$(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;
}

标记如下所示：

Pictures
    Sea
    Forest
    City

<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 och火狐

---

谢谢

只需将href属性值替换为。这样，当用户点击它时，页面就会转到他们所在的同一页面，而不会发生任何事情。保留您编写的CSS，使指针在悬停时不会出现，但删除jQuery代码

使用jQuery：

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

---

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

不幸的是，你不能说。page-item-3a，因为这适用于列表中的所有链接

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

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

试试这个：

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

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

我使用这个：

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

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

.unclickable {
   z-index:-1;
}


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

---

标记看起来怎么样？菜单是如何获得其行为的？我添加了标记。菜单从一个名为jQuery slide menu的jQuery插件获取其行为。这是不可能的，因为菜单是通过WordPress自动插入的。它是不断变化的，所以不可能用纯html编写；对父链接和所有子链接执行此操作。因此，该链接下的每个下拉列表都会得到href。不幸的是，WordPress不允许我在使用wp_list_categories时在链接上添加类。Lame，好吧，我已经编辑了选择器来选择列表中的第一个链接标题链接，希望这能起到作用！