Question

我的移动菜单和子菜单出现问题。

在移动设备视图中，单击顶级链接时，我的子菜单切换为打开以显示子链接，但是现在这些子链接不起作用，并且顶级链接不起作用（它不会转到其网址）。

不幸的是，我无法手动覆盖HTML菜单结构，因此我尝试添加插入符号链接（使用JQuery）以使子菜单在单击插入符号时出现。但是，它没有用。也许，我可以在顶级菜单项（li）的左侧添加或添加按钮链接（使用JQuery），以使按钮或插入符在切换子菜单的同时仍允许顶级链接转到其URL 。我希望一切都能很好地解释。感谢您的帮助。谢谢。

/ HTML /

<#nav id="nav">
    <li id="menu-item-8000" class="menu-item menu-item-has-children menu-item-8000"><a href="https://website.com/home/visit/" class="open-submenu">Visit</a>
      <ul class="sub-menu" style="display: block;">
        <li id="menu-item-7891" class="menu-item menu-item-7891"><a href="https://website.com/home/visit/sublink-one/" class="open-submenu">Visit Sublink One</a></li>
        <li id="menu-item-7892" class="menu-item menu-item-7892"><a href="https://website.com/home/visit/sublink-two/" class="open-submenu">Visit Sublink Two</a></li>
        <li id="menu-item-7893" class="menu-item menu-item-7893"><a href="https://website.com/home/visit/sublink-three/" class="open-submenu">Visit Sublink Three</a></li>
      </ul>
</li>
<li id="menu-item-8001" class="menu-item menu-item-has-children menu-item-8000"><a href="https://website.com/home/events/" class="open-submenu">Events</a>
      <ul class="sub-menu" style="display: block;">
        <li id="menu-item-7894" class="menu-item menu-item-7891"><a href="https://website.com/home/events/sublink-one/" class="open-submenu">Events Sublink One</a></li>
        <li id="menu-item-7895" class="menu-item menu-item-7892"><a href="https://website.com/home/events/sublink-two/" class="open-submenu">Events Sublink Two</a></li>
        <li id="menu-item-7896" class="menu-item menu-item-7893"><a href="https://website.com/home/events/sublink-three/" class="open-submenu">Events Sublink Three</a></li>
   </ul>
  </li>
</nav>

/ JQuery /

//Add caret to top level mobile menu item
  $(document).ready(function () {
    if ($(window).width() < 960) {
  $('#nav li>:not(ul)').addClass('open-submenu');
    }
 });

/* This is used to show the sub-nav on mobile */
$(function(){
   $('.open-submenu').on('click', function(e){
       if(Modernizr.mq('screen and (max-width:767px)')) {
        e.preventDefault();
        $(this).next($('.sub-menu')).slideToggle();
       }
   })

});

Answer 1

如果我理解正确

$(function() {

    var isNotMobile = $(window).width() > 786;

    $('.menu-item').each(function() {

        var item = $(this);
        var button = $('.open-submenu', item);
        var subMenu = $('.sub-menu', item);

        button.on('click', function(event) {
            if (isNotMobile) return true;
            event.preventDefault();
            subMenu.slideToogle();
            return false;
        });

    });
});

Answer 2

我通过反复试验解决了子菜单问题。解决方案非常简单，但是自从我编写JQuery以来已经有一段时间了。我希望这对遇到类似代码问题的人有所帮助：

/** HTML **/
<ul>
  <li><a href="http://website-page-1.com">Top Level Link</a>
   <!-- Insert button here to toggle submenu -->
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="http://website-page-2.com">Top Level Link</a>
   <!-- Insert button here to toggle submenu -->
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
  </li>
</ul>

/** JQuery **/
//Add button to all top level links that have a submenu
  $(document).ready(function () {
   if ($(window).width() < 960) {
  $('.sub-menu').before($('<button class="submenu-button"></button>'));

  $('.sub-menu').hide();

  $('.submenu-button').click(function () {
    $(this).next('.sub-menu').slideToggle();
   });
  }
});

/ ** CSS ** /

.submenu-button {
   width: 60px;
   height: 54px;
   background-color: transparent;
   border: 0;
   text-align: center;
   position: absolute;
   right: 0;
   z-index: 9999;
   font-weight: 700;
}

.submenu-button:after {
    color: #fff;
    content: ' ▾';
    display: flex;
    justify-content: center;
  }

}

子菜单切换，顶层链接不起作用

2 个答案: