Question

我的菜单的基本结构在html中是这样的：

<ul id="primary-menu">
  <li class="menu-item-has-children">
    <a href="/about"></a>
    <ul class="sub-menu">
      <li><a href="primeaty-list">Primary</a></li>
  </ul>
  </li>
</ul>

我的jQuery看起来像这样：

$('ul#primary-menu > li.menu-item-has-children').click(function(e) {
if ($(window).width() < 701) {  
  if (!$(e.target).closest('ul').is('.sub-menu')) {
    e.preventDefault();
    if (!$(this).hasClass('important')) {
      $(this).addClass('important');
        //toggle the menu 
    } else {
      //redirect if second click 
      window.location = $(this).find('a').attr('href');
    }
  }
}
});

这里应该应用的css：

.important ul.sub-menu{
    display:block;
}
.important{
    display: block;
}

当我点击包含子项的列表项时，它会阻止重定向到页面并按照我想要的方式添加一个类。但是，当我第二次点击时，它不会重定向到其相关链接。

如何才能在第二次点击时重定向？

Answer 1

使用e.preventDefault()时，您需要在a元素上使用它，而不是li。现在，您必须使用window.location = $(this).attr('href');稍微替换重定向代码。请参阅下面的代码：

$('ul#primary-menu > li.menu-item-has-children a').click(function(e) {
  if ($(window).width() < 901) {
    if (!$(e.target).closest('ul').is('.sub-menu')) {
      e.preventDefault();
      if (!$(this).hasClass('important')) {
        $(this).addClass('important');
        //toggle the menu 
      } else {
        //redirect if second click 
        console.log('redirected on second click', $(this).attr('href'));
        //window.location = $(this).attr('href');
      }
    }
  }
});

.important ul.sub-menu {
  display: block;
}

.important {
  display: block;
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primary-menu">
  <li class="menu-item-has-children">
    <a href="/about">test</a>
    <ul class="sub-menu">
      <li><a href="primeaty-list">Primary</a></li>
    </ul>
  </li>
</ul>

第二次单击时页面重定向不起作用

1 个答案: