WordPress子菜单 - 悬停时显示

0 人关注

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

我想做的事，用的是绥靖的代码，如下所示。

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

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

目前，我有这个。

JQUERY

    <script type="text/javascript">
    jQuery(document).ready(function($){
    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    </script>
这成功地显示了所有页面的当前页面的子菜单，但我无法解决如何显示另一个子菜单，如果它的父链接被悬停。
子菜单占据了完全相同的空间，所以在悬停时，它应该隐藏当前页面的子菜单链接。
谁能帮帮我。
提前感谢。
    <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>
<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>


            
             
              
               
                你应该发布一个你的菜单的HTML例子。  我不知道你的结构是什么，但我的第一个猜测是默认的wp_nav_menu。  无论怎样，请贴出来。


           
            
             
              
               StreetCoder
              
              ：


            
             
              
               
                试试这个
                
                 
                  $( "li.menu-item" ).hover(function() { $( this ).find( ".sub-menu" ).show(); });


            
             
              
               
                @Rooster 已经添加了HTML代码。


            
             
              
               
                @StreetCoder 这有一个奇怪的效果。  如果我将鼠标悬停在第二个父链接上，那么该父链接的子菜单就会出现，同样地，第三个父链接也会出现。  然而，在非悬停状态下，当前页的子菜单不再显示，然后最后一个父级的子菜单会持续显示，无论是否进一步悬停在父级链接上。


           
            
             
              
               StreetCoder
              
              ：


            
             
              
               
                你能不能把它放在jsfiddle里？


            
             
              
               
                这里的小提琴 -
                
                 jsfiddle.net/F2fGV


          
           
            
             
              
              
               Patrick Moore
              
             
             
              发布于
              
              2021-04-27


           
            
             
              
               这是你要找的东西。
              
              $( "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


            
             
              
               
                
                 
                  非常感谢。这很接近了，但是如果我把鼠标悬停在当前页面的父目录上，然后再离开，当没有悬停状态时，子导航就会完全消失。  如果没有悬停状态，当前页面的子菜单应该显示，就像当前页面第一次加载时那样。


           
            
             
              
               
                
                 Patrick Moore
                
                ：


            
             
              
               
                
                 
                  对不起，在
                  
                   
                    current_page_item
                   
                  
                  之前有一个错误的
                  
                   
                    .
                   
                  
                  见上面的更新和fiddle：
                  
                   jsfiddle.net/k8rSn/1


            
             
              
               
                
                 
                  该死的，我也刚刚发现了这一点。  非常感谢。


           
            
             
              
               
                
                 我在第二十五个主题上用一些额外的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;


           
            
             
              
               
                
                 
                  
                   如果你使用的是基于bootstrap的主题，请添加以下CSS。