하위 탐색 중복을 제거하려면 어떻게해야합니까?

Question

하위 탐색을 만들려고합니다. 지금 나는 두 subnav 있습니다. 메인 메뉴의 첫 번째 항목 위로 마우스를 가져 가면 해당 하위 메뉴가 나타납니다. 하지만 두 번째 항목 위로 마우스를 가져 가면 첫 번째 항목보다 두 번째 하위 항목이 나타납니다. 어떻게 이런 일이 일어나지 않도록 코드를 작성할 수 있습니까?

URL이 : 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 당신은 MouseLeave 이벤트를 만들었습니다

$(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 그것을 밖으로 시도하고 있었다 일할 수있는 지금 생각 괜찮아 보인다. 귀하의 용도에 맞게 약간의 수정이 필요할 수 있습니다.