Question

我有一个WordPress网站设置了一些导航。每个父导航链接都包含子菜单。

我想在psuedoish代码中做的事情如下：

如果是当前页面，则显示当前页面子菜单;

BUT

即使是当前页面，如果另一个父链接被悬停，则显示该子菜单。一旦悬停状态不再存在，请恢复到当前页面子菜单。

目前我有这个：

JQUERY

    <script type="text/javascript">
    jQuery(document).ready(function($){
    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    });
    </script>

这成功地显示了所有页面的当前页面子菜单，但是如果它的父链接被悬停，我无法弄清楚如何显示另一个子菜单。

子菜单占据的空间完全相同，因此在悬停时它应该隐藏当前页面的子菜单链接。

有人可以帮忙。

提前致谢。

HTML

    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://localhost:81/pps/">Home</a></li>
    <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-34"><a href="http://localhost:81/pps/?page_id=16">Our Services</a>
    <ul class="sub-menu" style="display: block;">
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://localhost:81/pps/?page_id=18">Services Sub Page One</a></li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost:81/pps/?page_id=20">Services Sub Page Two</a></li>
        <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35 no-cross"><a href="http://localhost:81/pps/?page_id=22">Services Sub Page Three</a></li>
    </ul>
    </li>
    <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://localhost:81/pps/?page_id=24">Why Us?</a>
    <ul class="sub-menu" style="display: block;">
        <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://localhost:81/pps/?page_id=44">Subpage of Why Us?</a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50 no-cross"><a href="http://localhost:81/pps/?page_id=48">Another Subpage Of Why Us?</a></li>
    </ul>

Answer 1

以下是您要找的内容：

$( "li.menu-item" ).hover(function() {  // mouse enter
    $( this ).find( " > .sub-menu" ).show(); // display immediate child

}, function(){ // mouse leave
    if ( !$(this).hasClass("current_page_item") ) {  // check if current page
        $( this ).find( ".sub-menu" ).hide(); // hide if not current page
    }
});

Answer 2

我用他们主题的一些其他CSS在25个上完成了这些。这可能也适用于其他主题。

默认情况下，它基本上是隐藏子菜单，然后当父菜单项悬停时，它将显示菜单。

添加到主题的其他CSS：

/*make the menu sub-menu items drop down on mouse hover */
ul.sub-menu{ display: none; }

ul.menu li.menu-item-has-children:hover > ul.sub-menu{
    display: block;
}

Answer 3

如果您使用基于引导程序的主题，请添加以下 CSS：

ul.navbar-nav li.menu-item-has-children:hover > ul.dropdown-menu{
    display: block !important;
}

不需要“显示无”

WordPress子菜单 - 悬停显示

3 个答案: