在Wordpress

Question

我创建了简单的菜单：

                    <ul class="menu-btn">
                        <a href="#"><li>Lorem ipsum dolor</li></a>
                        <a href="#"><li>Sit amet, consectetur</li></a>
                        <a href="#"><li class="current-page-item">Adipiscing elit</li>
                        </a>
                            <ul class="sub-menu">
                                <a href="#"><li>Lorem ipsum dolor</li></a>
                                <a href="#"><li>Sit amet, consectetur</li></a>
                                <a href="#"><li>Adipiscing elit</li></a>
                            </ul>
                        <li><a href="#">Quisque sed eros vehicula</a></li>
                        <li><a href="#">Sit amet, consectetur</a></li>                                       
                    </ul>

我希望在停留在parrent <li>元素后显示和隐藏子菜单类。

Jquery的：

jQuery(document).ready(function(){
/* navigation sub-menu display */

// Change 'hover' to 'click' if you want to
jQuery('.menu-btn > .sub-menu').parent().hover(function() {
  var submenu = jQuery(this).children('.sub-menu');
  if ( jQuery(submenu).is(':hidden') ) {
   jQuery(submenu).slideDown(200);
   } else {
   jQuery(submenu).slideUp(200);
  }
});

});

现在菜单显示/隐藏但不正确。因为当我将鼠标悬停在sub-menu类的每个<li>元素上时，它会显示/隐藏menu-btn类。

Answer 1

我对你的html代码进行了简单的更改，并使用css实现了hove效果：

请参阅此codepen.io/anon/pen/PNmyKR