Question

我有一个问题，让wp-nav-menu正常工作。我的菜单设计中有一个css三角形，所以菜单定位得更远，导致菜单在你到达之前就消失了。为了解决这个问题，我添加了一些jQuery，但是如果你打开它，菜单将保持打开状态，然后将鼠标移到它上面。该网站位于：https://www.appshc.com/这是我的Jquery代码：

       $(function() {

        //menu bug fix

        $("li.menu-item").mouseover(function() {

            var submenu = $('.sub-menu');
            $(this).children('ul').show();

        });

        $("li.menu-item ul").mouseleave(function() {

            $("li.menu-item ul").delay(200).hide();          

        }); 
   });

这是由wordpress生成的HTML，抱歉可怕的格式化

 <div class="menu-mainmenu-container">
   <ul id="menu-mainmenu" class="top-nav"><
   li id="menu-item-460" class="menu-item menu-item-type-post_type menu-item-object-page        menu-item-460"><a href="https://www.appshc.com/treatment-center-apps/">HEALTHCARE APPS</a></li>
    <li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-459"><a href="https://www.appshc.com/business-apps/">BUSINESS APPS</a></li>
    <li id="menu-item-464" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-464"><a href="#">MORE APPS</a>
    <ul class="sub-menu">
        <li id="menu-item-458" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-458"><a href="https://www.appshc.com/music-apps/">MUSIC APPS</a></li>
        <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="https://www.appshc.com/church-apps/">CHURCH APPS</a></li>
    </ul>
    </li>
    <li id="menu-item-461" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-461"><a href="https://www.appshc.com/mobile-app-blog/">BLOG</a></li>
    <li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-462"><a href="https://www.appshc.com/contact/">CONTACT US</a></li>
    <li id="menu-item-463" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-463"><a href="#">GET STARTED</a></li>
    </ul></div>

我有几个想法：

1）尝试使用我几乎一无所知的jQuery HoverIntent插件，但我一直在阅读它，但它缺乏良好的教程。

2）删除我的Jquery代码，并使用jQuery在子菜单周围添加一个包装器div并将其放置得更远，添加一个边距以按下子菜单，以便空间不在视图中，但父菜单项之间没有gam和子菜单。

我应该采取什么样的方式来解决这个问题？没有人能为此找到更好的解决方案吗？

WordPress wp导航菜单的问题

0 个答案: