Question

我有一个用下拉菜单在WordPress中创建的菜单。我菜单的问题在于菜单中的所有链接均不可单击，并且页面无法重新加载。但是，只要删除JS代码，链接就可以工作，但是我没有切换效果。

这是一个例子：

$('li > a').on('click', function(event) {
  event.preventDefault()
  $(this).parent().find('ul').first().toggle(300);
  $(this).parent().siblings().find('ul').hide(200);

  //Hide menu when clicked outside
  $(this).parent().find('ul').mouseleave(function() {
    var thisUI = $(this);
    $('html').click(function() {
      thisUI.hide();
      $('html').unbind('click');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu=menu" class="menu">
  <li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-37">
    <a href="domain.local">Home</a>
  </li>
  <li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-38">
    <a href="#">Dropdown</a>
    <ul class="sub-menu">
      <li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
        <a href="domain.local/submenu-1">Submenu 1</a></li>
      <li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40">
        <a href="domain.local/submenu-2">Submenu 2</a></li>
    </ul>
  </li>
</ul>

我在做什么错了？

Answer 1

链接不可单击的原因是，在您的JavaScript代码中，您通过添加event.preventDefault()阻止了默认行为。这也是删除JavaScript代码时链接突然起作用的原因。

请阅读event.preventDefault()或jQuerys documentation上的文档。

让我知道这是否有帮助，或者您还有其他问题。

菜单中的链接不可点击

1 个答案: