Jquery menu onhover는 첫 번째 자식 만 표시합니다.

Question

배우려고하는 멍청한 놈. 메뉴의 부모를 가리키면 첫 번째 자식 만 나머지를 표시하지 않는다는 문제가 발생했습니다. 제발 CSS를 신경 쓰지 마. 도움말 감사.

을 heres Sample code

감사에 대한 링크.

Answer 1

Check the demo.

사용

$('ul #multimenu').hover(function(){ 


}); 

또한 모든 리튬 요소에 동일한 ID를 사용하여, 당신은 that.id 년대가 고유해야 의미하지 말아야.

Answer 2

동일한 ID로 여러 컨트롤을 사용할 수 없으며 대신 이름을 사용할 수 있습니다. 그래서 나는 모든 리튬의 그 잘못에 ID과 같이 multimenu를 사용하는

Live Demo

$('li[name=multimenu]').hover(function() { 
     $(this).children('.submenu').show(); 
    }, function() { 
     $(this).children('.submenu').hide(); 
    });​ 

Answer 3

을 변경했습니다. ID는 페이지에서 하나씩 사용할 수 있습니다. 이드는 독특합니다.

모든 ID를 클래스 &으로 변경했습니다. 아래 예제를 참조하십시오.

예 :http://jsfiddle.net/surendraVsingh/s6EXf/6/

Answer 4

또는이 사용

$('#multimenu a').hover(function(){ 
    $(this).next().show(); 
},function(){ 
    $(this).next().hide(); 
}); 

작업 예 : 그이 함께 할 수 있기 때문에 첫 번째 자식 클래스를 제거

<ul id="multimenu"> 
    <li><a href="#">Example 1</a><div class="submenu"></div></li>   
    <li><a href="#">Example 2</a><div class="submenu"></div></li>  
    <li><a href="#">Example 3</a><div class="submenu"></div></li> 
    <li><a href="#">Example 4</a><div class="submenu"></div></li> 
    <li><a href="#">Example 5</a><div class="submenu"></div></li> 
</ul> 

: http://jsfiddle.net/s6EXf/5/

이에 HTML을 변경 CSS 의사 클래스 :first-child

Answer 5

문제는 id가 고유해야하며 js는 첫 번째 만 가져옵니다. 변경 ID = "multimenu"클래스에 = "multimenu"다음 JS 코드가 있어야한다 :

$('.multimenu').hover(function(){ 

     $(this).children('.submenu').show(); 


    },function(){ 

     $(this).children('.submenu').hide(); 

    });​ 

Answer 6

시도이

HTML :

<ul> 
<li><a href="#">Example 1</a> 
    <div class="submenu"> 
     <div>aaaa<div> 
     <div>bbbb<div> 
     <div>cccc<div>  
    </div> 
</li> 
<li><a href="#">Example 2</a> 
    <div class="submenu"> 
     <div>1111<div> 
     <div>2222<div> 
     <div>3333<div>  
    </div> 
</li> 
<li><a href="#">Example 3</a> 
    <div class="submenu"> 
     <div>xxxx<div> 
     <div>yyyy<div> 
     <div>zzzz<div>  
    </div> 
</li> 
<li><a href="#">Example 4</a> 
    <div class="submenu"> 
     <div>4444<div> 
     <div>5555<div> 
     <div>6666<div>  
    </div> 
</li> 
</ul> 

CSS :

ul li { 
float:left; 
margin-left:1em;  
} 
.submenu { 
position:absolute; 
display:none; 
width:105px; 
height:150px; 
-webkit-border-radius: 0px 0px 10px 10px; 
border-radius: 0px 0px 10px 10px; 
background:#ccc; 
z-index:123; 
}  

Jquery :

$('li').hover(function() { 
    $(this).children('.submenu').show(); 
    }, function() { 
    $(this).children('.submenu').hide(); 
});​ 

데모 여기를 참조하십시오 :
http://jsfiddle.net/naresh3591/4H5BE/4/