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

【问题标题】：Jquery/JS and CSS Horizontal list Navigation Click Drop Down Hyperlinks Not WorkingJquery/JS 和 CSS 水平列表导航单击下拉超链接不起作用
【发布时间】：2014-05-21 04:38:00
【问题描述】：

我用 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>

将鼠标悬停在“悬停”上很好，“点击”链接应该可以正常工作，但子菜单链接不起作用。

提前致谢

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

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

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

【讨论】：

最好不要将逻辑链接到 HTML 元素（例如使用 a）。使用类将表示与逻辑分离，并允许您对任何结构使用相同的脚本，例如 span 或 div 等。
@Ramy 我同意这一点，但是，目标元素上没有类，即锚标记。答案特定于给定的 html。
很公平。给 OP 的一个很好的通知不会伤害任何人，也会促进良好的做法:)

【解决方案2】：

将您的第一个 jQuery sn-p 更改为：

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

对链接的点击正在传播并触发您在父项上拥有的点击事件处理程序。

【讨论】：

我相信这是治疗症状而不是问题本身，并增加了一个我们可以避免的听众。
@Ramy - 我没有添加点击处理程序，OP 做了。我只是修改了他在里面的那行。
@j08691 没错。我不是说“你”加了它。我的意思是我们可以完全避免它。

【解决方案3】：

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

请注意，我将menu-link 类添加到主菜单的a 元素中。这是working demo

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

【讨论】：