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

Markup看起来像这样：

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

如果有人知道在悬停“图片”链接时如何删除状态栏网址会很棒。但我不认为可以在现代浏览器中使用Safari och 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");
});

使用jQuery在下拉菜单中使父链接无法点击

5 个答案: