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

Answer 2

这样的事情怎么样？

$( document ).ready( function() {
    $('button.dropdown-toggle').detach();
    $('ul#menu-main-menu>li').on("click", function(e){
        if(!$(this).hasClass("clicked")){
         // open menu
         $(this).addClass("clicked")
         e.preventDefault();
        }
    });
} );

Answer 3

我刚刚添加了之前使用过的代码片段，但发现了一个小细节：当您点击子项目时，它会转到相应的页面，但菜单中的所有子项目都会显示。

这是JS

$(document).ready(function (){
    $('ul#menu-main-menu > li.menu-item-has-children').click(function(e) {
        if ($(window).width() < 1300) {   
          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');
            }
          }
        }
    });
});

CSS如下：

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

点击2015主题

后，它是如何看待的

如何使父菜单项仅在第二次单击时指向其链接

3 个答案: