Javascript 如何禁用嵌套ul中的所有链接(最低级别的链接除外)?

Javascript 如何禁用嵌套ul中的所有链接(最低级别的链接除外)?,javascript,html-lists,nested-lists,Javascript,Html Lists,Nested Lists,假设我有一个列表,如下所示: <ul> <li><a href="Sitepages/Introduction.aspx">Introduction</a> <ul> <li><a href="Sitepages/AboutMe.aspx">About me</a></li> <li><a href="Sitepages/About

假设我有一个列表,如下所示:

<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>
虽然顶级链接(简介)会在单击时忽略默认行为(重定向),但它会展开并显示“关于我”和“关于公司”选项。但当我点击“关于公司”时,它仍然会重定向

我应该在代码中编辑什么来将每个“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');
});
小提琴:

如果链接不起作用,为什么会有链接?我在SharePoint中根据分类法制作此菜单。如果分类法中没有真正的链接,则项目的标题甚至不会出现在列表中。
// 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');
});