Jquery/JS和CSS水平列表导航单击下拉超链接不工作

Jquery/JS and CSS Horizontal list Navigation Click Drop Down Hyperlinks Not Working

本文关键字：单击 超链接 工作 导航 列表 JS CSS 水平 Jquery      更新时间：2023-09-26

我用css和jquery下拉元素创建了一个看起来相当直接的水平导航菜单，但由于某种原因，它似乎没有遵循点击下拉菜单上的链接。

我做了一个小提琴:http://jsfiddle.net/y3GBE/19/

<nav>
  <ul id="menu-main-navigation" class="menu">
    <li id="menu-item-108" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-108">
      <a title="Sub" href="http://Media">Hover</a>
      <ul class="sub">
        <li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109">
          <a title="Audio" href="http://Audio">Audio</a>
        </li>
        <li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-110">
          <a href="http://Visual">Visual</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-112" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112">
      <a href="http://Events">Navi</a>
    </li>
    <li id="menu-item-113" class="menu-item menu-item-typemenu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-117">
      <a href="http://click">Click</a>
      <ul class="sub-menu">
        <li id="menu-item-115" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-115">
          <a href="http://HQ">Headquarters</a>
        </li>
        <li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-116">
          <a href="http://Magazine">Magazine</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

悬停在" Hover "上是可以的，"click"链接在它应该工作的地方，但子菜单链接不起作用。

Thanks in advance

将选择器更改为$('.menu-item-has-children>a')，仅针对锚标记，而不是包含子菜单的列表项。

小提琴:http://jsfiddle.net/y3GBE/20/

将第一个jQuery代码段更改为:

$('.sub-menu a').click(function (e) {
    e.stopPropagation();
});

链接上的单击正在向上传播，并触发父项上的单击事件处理程序。

您的子菜单链接在类.menu-has-children的元素内，因此由于您将return false;添加到单击事件中，因此链接不可单击。您应该将事件侦听器添加到链接中，而不是添加到元素中。

注意，我将类menu-link添加到主菜单的a元素中。下面是一个工作演示

$('.menu-item-has-children').on('click', '.menu-link', function(e) {
    e.preventDefault();
    var $parentMenu = $(this).parents('.menu-item-has-children');
    $parentMenu.toggleClass('active');
    $('.sub-menu', $parentMenu).toggleClass('visible');
});
相关文章：