Question

我正在开发一个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>

和hrere是我的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');
        }
    }
});

请帮助

Answer 1

您的代码非常混乱，所以首先我会回答一般问题：如果您希望在没有链接实际打开的情况下单击链接时发生事件，则必须停止触发事件。有3种方法可以做到这一点（我在答案的底部包含了一个链接，关于哪些方法做了什么），在这里我选择了e.preventDefault()：

document.getElementById("myspeciallink").addEventListener("click", function(e) {
  alert("A different action!");
  e.preventDefault(); //return false / stopPropagation could've also worked here
});

<a href="http://ohno.com" id="myspeciallink">I'm a link!</a>

关于您的代码：

您正在尝试将事件绑定到代码中不存在的sub-menu。
sub-menu > a选择器仅适用于直接子项，因此对于您的选择器和以下示例代码，只有示例B将应用于选择器。也许sub-menu a更适合这里：

$(".sub-menu > a").click(() => alert("Clicked"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
    <li>
        <a href="#">Example A</a>
    </li>
</ul>
<br/>
<ul class="sub-menu">
    <a href="#">Example B (Which is what you did but not what you want)</a>
</ul>

除非您没有选择，否则不应该像这样进行基于屏幕尺寸（a.k.a响应式网页设计）的动画。您最好使用CSS来实现transistions尝试完成的任务。我建议您阅读更多有关此主题的内容。

我强烈建议更好地学习CSS，JS和HTML，以便更好地了解正在发生的事情以及良好的＆amp;坏习惯。

另见：

What's the difference between event.stopPropagation and event.preventDefault?

Answer 2

这里有很多事情。

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

但是你没有类.sub-menu的元素。您应该将其添加到应该应用它的a元素的直接父级。

其次，如果您不希望a标记重定向您，那么您应该添加event.preventDeault()，其中event是您的事件变量可以像.on()

一样进入$('.sub-menu >a').on('click', function(event) {...函数

最后，此代码

$('.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');
}

以这种方式工作，首先它隐藏所有下拉菜单然后打开你点击的一个。如果是期望的行为，那么忽略它。但我认为不是。

为什么？因为现在当您点击可见下拉列表a标签（打开它的那个）时，您会希望下拉列表隐藏。在你的情况下，它将隐藏并再次显示。但如果你想让它以这种方式工作，那就没问题了。代码是正确的。

无法在html中打开子菜单

2 个答案: