Javascript 如何禁用链接但保持数据切换下拉列表工作

我正在使用引导程序处理菜单

菜单有三个级别。 主菜单>第一个子菜单>第二个子菜单

具有第二个子菜单的第一个子菜单中的菜单项也需要可单击。这已经起作用了。子菜单在桌面上通过悬停显示，但在移动设备上，您需要单击菜单项以打开子菜单。所以在手机上，我希望这个href消失

目前，我正在使用此代码在手机上删除它：

if ($(window).width() > 768) {
    if ($(window).width() < 768) {
        $(".dropdown-toggle").each(function(){
            $(".dropdown-toggle").removeAttr("data-target");
            $(".dropdown-toggle").removeAttr("href");
        })  
    } 

    $(window).resize(function() {
        if ($(window).width() < 768) {
            $(".dropdown-toggle").each(function(){
                $(".dropdown-toggle").removeAttr("href");
            })  
        }
    });
});

if（$（窗口）.width（）>768）{
如果（$（窗口）.width（）<768）{
$（“.dropdown toggle”）.each（函数（）{
$（“.dropdown toggle”）.removeAttr（“数据目标”）；
$（“.dropdown toggle”）.removeAttr（“href”）；
})  
} 
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
$（“.dropdown toggle”）.each（函数（）{
$（“.dropdown toggle”）.removeAttr（“href”）；
})  
}
});
});

但这段代码的问题是，当您返回到大于768的分辨率时，它仍然不存在。当你在平板电脑上进入横向模式时，就会发生这种情况

我已经在找这个了。我发现可以添加“disabled”类，也可以使用指针事件对其进行样式设置：none。但所有这些解决方案也会禁用数据切换=“下拉”功能

那么，我如何才能禁用href，但保持数据切换工作

提前谢谢

这是我为以防万一而使用的html：

<nav class="navbar navbar-default lumenisInnerMenu" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        </div>
        <div class="collapse navbar-collapse lumenisListItems">
            <ul class="nav navbar-nav">
                [*>NODE]
            </ul>
        </div>
    </div>
</nav>

[>NODE]
    <li class="[?SELECTED]dir current[/?][?NODE] dropdown-submenu HasChildren child[=DEPTH] dropdownmenu [/?]">
    [?ENABLED]
        <a href="[=URL]" class="[?NODE] dropdown-toggle[/?]" [?NODE] data-target="[=URL]" data-toggle="dropdown" [/?]>
                <div class="textsubitem">
                    <span>[=TEXT]</span>
                </div>
        </a>
    [?ELSE]
        <a href="#" [?NODE] [/?]> [?NODE]
            <span>[=TEXT]</span>[/?]
        </a>
    [/?]
    [?NODE]
        <ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
            [*>NODE]
        </ul>
    [/?]
    </li>
[/>]

切换导航

[*>节点]

[>节点]

[？已启用]
[？其他]
[/?]
[？节点]

[*>节点]

[/?]

[/>]

用这个就行了

<a href="javascript:void(0)" >Anything goes here</a>

---

使用此

时，由于第一个if条件

if（$（window）.width（）>768）{}

，您无法在javascript中传递窗口大小调整代码或移动检测代码。这应该如何工作？@JanatbekSharsheyev问题是第一个子菜单中的菜单项，第二个子菜单也需要可点击。这已经起作用了。子菜单在桌面上通过悬停显示，但在移动设备上，您需要单击菜单项以打开子菜单。所以在手机上，我希望这个href消失。因此，如果您使用href=“javascript:void（0）”则即使在移动视图中触摸href所在的特定位置，您也不会被导航到任何页面。@JanatbekSharsheyev我想您是在试图对这个问题发表评论。但是你对我的答案发表了评论。为什么不使用href=“javascript:void（0）”呢。

$(".dropdown-toggle").removeAttr("href");