如何删除子导航重叠？

Question

我正在尝试创建子导航。现在我有两个subnav。当我将鼠标悬停在主菜单的第一项上时，相应的子菜单就会出现。但是，当我将鼠标悬停在第二个项目上时，第二个子导航会显示在第一个导航上。我如何编写代码以避免这种情况发生？

网址：http://arabic001.com

$(document).ready(function() { 

     $('#arbNavText01').mouseover(function() { 
      $('#subNav01').show('slow'); 
     }); 

     $('#subNav01').mouseleave(function() { 
      $('#subNav01').hide('slow'); 
     }); 


     $('#arbNavText02').mouseover(function() { 
      $('#subNav02').show('slow'); 
     }); 

     $('#subNav02').mouseleave(function() { 
      $('#subNav02').hide('slow'); 
     }); 



     }) 

我只是想从斯科特下面的建议，我不能够显示和隐藏悬停的子菜单。任何想法如何解决这个问题？这里是我的新代码：

HTML

<div id="menu01" class="menu_item"> 
      <div id="engNavText01">Alphabet</div> 
      <div id="arbNavText01">الأحرف</div> 
      <div id="subNav01" style="display:none;"> 
       <a href="colors" class="subNav"> 
        <span style="font-size:26px; cursor:pointer;">قراءة</span</a> 
        <br>reading<br><br> 
     </div> 
     </div> 

     <div id="menu02" class="menu_item"> 
      <div id="engNavText02">Numbers</div> 
      <div id="arbNavText02">الأحرف</div> 
      <div id="subNav02" style="display: none; "> 
       <a href="colors" class="subNav"> 
        <span style="font-size:26px; cursor:pointer;">قراءة</span</a> 
        <br>reading<br><br> 
     </div> 
     </div> 

和JS

$(document).ready(function() { 

$('.menu_item').children().hover(
function(){ 
    $subNav = $(this).parents('menu_item').children("div[id^='subNav'"); 
    if ($subNav.css('display', 'none')){ 
     $subNav.show('slow'); 
    } 
}, 
function(){ 
    $(this).parents('menu_item').children("div[id^='subNav'").hide('slow'); 
}); 

}) 

Answer 1

您已经创建mouseLeave事件，但你只有它连接到子菜单。因此，为了使菜单消失，用户必须将鼠标悬停在子菜单上，然后移出。您可以在打开新的子菜单之前隐藏其他子菜单，以达到您想要的效果。所以，保持你的鼠标离开事件，你有他们，你可以修改你的鼠标悬停2个事件这样的：

$('#arbNavText01').mouseover(function() { 
     $('#subNav02').hide('slow'); 
     $('#subNav01').show('slow'); 
    }); 
    $('#arbNavText02').mouseover(function() { 
     $('#subNav01').hide('slow'); 
     $('#subNav02').show('slow'); 
    }); 

编辑发表评论： 我在想，当我去和你的页面看起来原本。我认为如果你在你的html中使用了一个稍微不同的结构，这可以完成。现在你的菜单div在结构上并没有明确的相互关系，因此可能需要添加一个可以包含与每个菜单项关联的3个元素的div。

我要吐出一个想法，它甚至可能不工作，更不用说是最好的方法。

<div id="menu01" class="menu_item"> 
    <div id="engNavText01">Alphabet</div> 
    <div id="arbNavText01">الأحرف</div> 
    <div id="subNav01" style="display: none; "> 
     <a href="colors" class="subNav"><span style="font-size:26px; cursor:pointer;">قراءة</span</a> 
     <br>reading<br><br> 
    </div> 
</div> 
<div id="menu02" class="menu_item">... 

编辑JS，我现在觉得它可以工作

$('.menu_item').hover(
    function(){ 
     $subNav = $(this).children("div[id^='subNav']"); 
     if ($subNav.css('display', 'none')){ 
      $subNav.show('slow'); 
     } 
    }, 
    function(){ 
     $(this).children("div[id^='subNav']").hide('slow'); 
    } 
); 

试图出来了JSFiddle，似乎好那里。可能需要对您的使用进行一些修改。