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

Question

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

我做了一个 fiddle :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>

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

提前致谢

Answer 1

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

fiddle :http://jsfiddle.net/y3GBE/20/