Question

我有这种结构，想要禁用某些链接，而不会对某个div中的其他链接产生影响。

<div class="navigation">
<a href"#">DISABLE THIS LINK</a>
<ul class="submenu">
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
</ul>
<a href"#">DISABLE THIS LINK</a>
<ul class="submenu">
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
</ul>
<a href"#">DISABLE THIS LINK</a>
<ul class="submenu">
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
<li><a href="#">KEEP THIS LINK ENABLED</a></li>
</ul>
</div>

我尝试过这样的事情：

$(".navigation a").click(function(e){ e.preventDefault(); });
$(".subitem a").click(function(){ return true; });

但是这没用。

我有什么想法可以禁用“禁用此链接”并在不更改HTML的情况下启用其他功能？

Answer 1

您可以检查点击的链接是否具有class=".submenu"的父元素，如果是，它会将该语句评估为true，一切都将正常工作。如果它不是.submenu的小孩，那么您拨打e.preventDefault()，这样点击就不会做任何事情。

$(".navigation a").click(function(e){
    if ($(this).parent().parent('.submenu')) {
        return true;
    }
    else {
       e.preventDefault();
    }
});

Answer 2

您只需选择导航DIV的直接子项。

$(".navigation").children('a').click(function(e){ 
    e.preventDefault();
});

http://jsfiddle.net/8QuWj/3/

Answer 3

您可以通过更改选择器来实现此目的。

（＆＃34; .navigation a＆＃34;）将选择所有＆＃39; a＆＃39;类.navigation中的标签，如果你将其改为（＆＃34; .navigation＆gt; a＆＃34;），它只会选择直接的孩子＆＃39; a＆＃39;元件。

使用javascript禁用特定链接，让其他人保持活动状态

3 个答案: