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

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

}