0

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

我想在伪代码中执行的操作如下：

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

但

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

目前我有这个：

查询

    <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>
4

3 回答 3

3

这是您要查找的内容：

$( "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
    }
});
于 2013-11-05T21:50:00.170 回答
1

我在 25 个主题上使用附加 CSS 完成了这一点。这也可能适用于其他主题。

它基本上默认隐藏子菜单，然后当父菜单项悬停时，它会显示菜单。

添加到主题的附加 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;
}
于 2020-08-14T18:44:17.663 回答
0

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

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

不需要“显示无”

于 2021-04-27T14:35:15.370 回答