코드로 표시되지 않는 드롭 다운 메뉴 - jQuery

이것은 드롭 다운 메뉴를위한 코드입니다. 커서가 버튼 위로 움직일 때 드롭 다운 (umdown)되도록 설계되었습니다. 그러나 커서가 다중에서 멀어지면 umdown이 사라집니다.코드로 표시되지 않는 드롭 다운 메뉴 - jQuery

HTML 마크 업 :

<div id="button"><span id="text">Down</span></div> 

<div id="umdown"> 
    <div id="multi">Multiple</div> 
    <div id="sd">Single</div> 
</div>

CSS 코드 :

#button{ 
    position:relative; top:1px; background-color:#060; width:200px; height:30px; background-image:url(../images/btn_bg.jpg); cursor:pointer; 
} 

#text{ position:absolute; margin-top:5px; text-align:center; width:200px; height:30px; font-stretch:expanded; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-weight:bold; font-size:17px;} 

#multi{ 
    width:160px; margin-left:5px; 
} 

#sd{ 
     width:160px; margin-left:5px; 
} 


#umdown{ 
    position:relative; left:30px; height:50px; background-color:#900; width:170px; cursor:pointer; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-size:14px; 
}

자바 스크립트 코드 :

$('#button').bind('mouseover',function(){ 
    $('#umdown').fadeIn();}); 
    $('#umdown').bind('mouseover',function(){ 
       $('#umdown').show();  }); 

    $('#umdown').bind('mouseout',function(){                $('#umdown').fadeOut(); 
    });

날 내가 잘못 한 일을 알려주십시오.

감사 장

출처

2010-06-28 X10nD

를 참조하십시오? 수행 – Serge

@serge ...... – X10nD

대신 여기 mouseout, 당신이 mouseleave 원하므로이 대체 :이

$('#umdown').bind('mouseout',function(){ 
    $('#umdown').fadeOut(); 
});

을 :

가장 큰 차이점은 mouseleave docs에

$('#umdown').bind('mouseleave',function(){ 
    $(this).fadeOut(); 
});

mouseleave 이벤트는 event bubbling을 처리하는 방식에서 mouseout과 다릅니다. 이 예제에서 mouseout이 사용 된 경우 마우스 포인터가 내부 요소에서 벗어나면 핸들러가 트리거됩니다. 이는 일반적으로 바람직하지 않은 동작입니다. 반면 mouseleave 이벤트는 마우스가 바인딩 된 요소를 떠날 때 핸들러를 트리거합니다. 하위 요소는 바인딩되지 않습니다. 따라서이 예제에서, 마우스가 Outer 요소를 벗어나고 Inner 요소를 벗어나면 처리기가 트리거됩니다.

전체 코드는 다음과 같습니다 그래서 나는/문제를 가져, 페이드를 처리 할뿐만 아니라이 경우 .stop()을 사용하는 것이 좋습니다 것입니다 : 내가 알고있는 것처럼

$('#button').bind('mouseover',function(){ 
    $('#umdown').stop(true, true).fadeIn(); 
}); 
$('#umdown').bind('mouseleave',function(){ 
    $(this).stop(true, true).fadeOut(); 
});

You can see a working demo here

출처

2010-06-28 20:31:55

그렇진 $ ('#의 umdown') 바인드 ('하는 MouseLeave', 기능() { $ ('#의 umdown') 페이드 아웃();. }).; 이 작품은 .... – X10nD

@ Jean - Clarify? 귀하의 의견은별로 이해가되지 않습니다 ... 나는 귀하의 스타일/마크 업과 함께 코드의 데모를 추가하여 효과를 보여줍니다. –

나는 $ (this) fadeOut()을하지 않았기 때문에 $ ('umdown')을 유지했다. 마우스가 떠날 때 페이드 아웃된다. – X10nD

, 당신은 단지 원하는 버튼 위로 마우스를 가져 갔을 때 #umdown의 가시성을 토글합니다.

$("#button").hover(function(){ 
    $("#umdown").fadeIn(500); 
}) 


$("#umdown").mouseleave(function(){ 
    $(this).fadeOut(300) 
});

당신이 당신의 자바 스크립트를 게시 할 수있는 작업 데모 here

출처

2010-06-28 20:33:08 adardesign

코드로 표시되지 않는 드롭 다운 메뉴 - jQuery

답변

관련 문제