如何禁用嵌套ul中的所有链接，除了最低级别的链接

How to disable all links inside a nested ul, except for the ones at the lowest level?

本文关键字：链接 嵌套 何禁用 ul      更新时间：2023-09-26

假设我有一个列表，像这样:

<ul>
<li><a href="Sitepages/Introduction.aspx">Introduction</a>
    <ul>
        <li><a href="Sitepages/AboutMe.aspx">About me</a></li>
        <li><a href="Sitepages/AboutTheCompany.aspx">About the company</a>
            <ul>
                <li><a href="Sitepages/History.aspx">History</a></li>
                <li><a href="Sitepages/Locations.aspx">Locations</a>
                    <ul>
                        <li><a href="Sitepages/Belgium.aspx">Belgium</a></li>
                        <li><a href="Sitepages/France.aspx">France</a></li>
                        <li><a href="Sitepages/Germany.aspx">Germany</a></li>
                        <li><a href="Sitepages/Norway.aspx">Norway</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

我有一个脚本，将这个嵌套的ul转换为手风琴，以便首先只显示顶层。只要有人点击了包含另一个ul的li中的链接，它就会展开这个ul，以此类推。

问题是，虽然没有提供链接时所有这些都可以正常工作，但我想禁用每个"a"标记的默认行为，除了最低级别的那些。因此，最低级别的li标记(其中有一个链接)仍然应该是活动链接。

下面是禁用顶级链接默认行为的javascript代码:

    $this.find("li").each(function(){
    if ($(this).find("ul").size() != 0) {
        if ($(this).find("a:first")) {
            $(this).find("a:first").click(function(){ return false; });         
    }
});

虽然顶层链接(简介)在点击时会忽略默认行为(重定向)，但它会展开并显示"关于我"answers"关于公司"选项。但是当我点击"关于公司"时，它仍然会重定向。

我应该在我的代码中编辑什么来设置每个"a"标签的默认行为为false，除了最后一个(在我的例子中:国家名称)?

谢谢你的帮助!

可以设置两个处理程序。一个用于禁用无序列表中的所有链接，另一个用于处理最后一个无序列表上的单击:

// Disable all links within an ul
$('ul').on("click", "a", function(e){
    e.preventDefault();
});
// second handler to bind to the last ul
$('ul:last').on("click", "a", function(e){
    window.location.href = $(e.target).attr('href');
});

小提琴:http://jsfiddle.net/puleos/CjB99/

相关文章：