javascript - 如何使父菜单项仅在第二次单击时定向到其链接

Question

我网站的所有菜单项和子项都是链接。因此，当我单击具有子项目的父项目时，它会打开子菜单。仅当我第二次单击它时，它才会将我带到其引用的链接。

这是我如何使用 JS 和 CSS 的:

$(document).ready(function (){
    $('ul#main-nav > li.menu-item-has-children').click(function(e) {
        if ( $(window).width() < 768 ) {   
          if ( !$(e.target).closest('ul').is('.sub-menu') ) {
            e.preventDefault();
            if (!$(this).hasClass('important')) {
              $(this).addClass('important');
            } else { 
              window.location = $(this).find('a').attr('href');
            }
          }
        }
    });
});

ul.sub-menu{display:none;}

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

这是基本的 HTML 结构:

<ul id="main-nav" class="nav fl">
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-27 parent">
        <a href="https://www.schoemanlaw.co.za/services/">Legal Services</a>
        <ul class="sub-menu">
            <li id="menu-item-4306" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-97 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-4306 parent">
                <a href="https://www.schoemanlaw.co.za/services/commercial-law/">Commercial Law</a>
                <ul class="sub-menu">
                    <li id="menu-item-4331" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-97 current_page_item menu-item-4331">
                        <a href="https://www.schoemanlaw.co.za/services/commercial-law/">General</a>
                    </li>
                    <li id="menu-item-4556" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4556 parent">
                        <a href="#">Registration and Administration of Business Entities</a>
                        <ul class="sub-menu">
                            <li id="menu-item-4317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4317">
                                <a href="https://www.schoemanlaw.co.za/services/registration-and-administration-of-companies/">Companies</a>
                            </li>
                            <li id="menu-item-4316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4316">
                                <a href="https://www.schoemanlaw.co.za/services/registration-and-administration-of-co-operatives/">Co-operatives</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

如何对也有子项目的子项目链接执行相同的操作？

Answer 1

请将其添加到您的 js 中，并让我知道它是否有效。

$('ul#main-nav > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children').click(function(e) {      
  e.preventDefault();
  if( $(this).hasClass('importante') ){
     window.location = $(this).find('a').attr('href');
  }
  else{
     $(this).addClass('importante');
  }
});