Javascript 无法在html中打开子菜单

我正在一个HTML网站上工作。网站中的菜单在桌面屏幕上正常工作。但在移动版本中，父菜单作为下拉菜单正确打开。但当我试图打开子菜单时，它并没有打开。若我点击图标，它将重定向到链接到父菜单的页面

我只想在单击图标时打开子菜单下拉列表。但是父菜单链接应该在那里

我对javascript非常陌生。请帮我解决我的问题

这是我的html代码

<nav class="navigation">
    <ul>
        <li> <a href="index.html">HOME </a>
                        </li>
        <li> <span><a href="who-we-are.html">WHO WE ARE </a></span>
            <i class="ion-ios-plus-empty visible-xs"></i>
            <ul class="sub-nav">
                <li>
                    <a href="vision.html">Vision</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

主持人是我的js

$('.sub-menu >a').on('click', function() {
    if ($(window).width() <= 767) {
        $('.sub-menu').removeClass('on');
        $('.sub-menu> ul').slideUp('normal');
        if ($(this).next().next('ul').is(':hidden') == true) {
            $(this).parent('li').addClass('on');
            $(this).next().next('ul').slideDown('normal');
        }
    }
});

请帮我做几件事

首先，将jQuery代码应用于元素$'.sub menu>a'，这意味着它将应用于作为.sub menu元素的直接子元素的所有a元素

但是您没有具有class.sub菜单的元素。您应该将它添加到应该应用它的元素的直接父级

其次，如果您不希望a标记重定向您，那么您应该添加event.preventDeault，其中event是一个事件变量，您可以在其中获取。在类似于$'的函数上。子菜单>a'。在“单击”时，functionevent{

最后，这个代码

$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
    $(this).parent('li').addClass('on');
    $(this).next().next('ul').slideDown('normal');
}

它的工作原理是先隐藏所有下拉列表，然后打开你点击的一个。如果这是你想要的行为，那么忽略它。但我不认为是这样

---

为什么？因为现在当你点击一个可见的下拉标签，打开它的标签时，你会希望下拉列表隐藏起来。在你的情况下，它会隐藏并再次显示。但是如果你想让它这样工作，那么没有问题。代码是正确的。

你的代码非常混乱，所以首先我要回答一个问题：如果你想让一个事件发生当单击链接而没有实际打开链接时发生，您必须停止触发事件。有3种方法可以做到这一点，我在回答的底部包含了一个链接，关于哪个做什么，我在这里选择了e.preventDefault：

document.getElementByIdmyspeciallink.addEventListenerclick，函数E{ 提醒一个不同的行动！； e、 preventDefault；//return false/stopPropagation也可以在这里工作 };

---

没有匹配的元素。子菜单已使用2x业务模板。url:。在此模板中，父标记没有任何链接。