下拉菜單幾乎可以工作，但並不完美

我做了一個登錄下拉菜單，但有時它會滑動2次。我不能找到問題maby你們有些人知道這個問題。下拉菜單幾乎可以工作，但並不完美

這裏是我的代碼：

的Jquery：

$("div#drop_down").hide(); 

$("p.login_trigger").mouseenter(function() { 
    $("#drop_down").slideDown(250); 
}); 

$("#drop_down").mouseleave(function() { 
    $(this).slideUp(250); 
});

HTML：

<div id="login_area"> 
    <p class="login_trigger">Login 
     <div id="drop_down"> 
      <form id="" name="" method="post"> 
       <input type="text" name="username" class="username" /><br /> 
       <input type="password" name="password" class="password" /><br /> 
       <input type="submit" name="submit" class="button" value="Login" /> 
      </form> 
     </div> 
    </p> 
</div>

CSS：

div#login_area p.login_trigger { 
display:block; 
padding:6px; 
background-color:#e2e2e2; 
color:#4a4a4a; 
-webkit-border-radius:5px; 
border-radius:5px; 
z-index:99;

}

div#login_area div#drop_down { 
position:absolute; 
right:20px; 
top:40px; 
background-color:#e2e2e2; 
border:1px solid #e2e2e2; 
padding:10px; 
-webkit-border-radius: 4px 0px 4px 4px; 
border-radius: 4px 0px 4px 4px; 
z-index:9;

}滑動之前

來源

2013-07-24 Julez

這裏是替代其跟蹤登錄div的狀態。這裏的對象是基於完成的狀態轉換來改變行爲。這是通過：

使用addClass，hasClass和removeClass來標識div的狀態。
使用slideDown和slideUp的回調函數更新狀態。

隨着覆蓋狀態，mouseleave的條件是hasClass("dropped")爲真。

$("p.login_trigger").mouseenter(function() { 
    $("#drop_down").slideDown(250, function() { $(this).addClass("dropped"); }); 
}); 

$("#drop_down").mouseleave(function() { 
    if ($(this).hasClass("dropped")) 
     $(this).slideUp(250, function() { $(this).removeClass("dropped") }); 
});

Working fiddle

來源

2013-07-24 12:21:55 veritasetratio

插入.stop()方法：

$("div#drop_down").hide(); 

$("p.login_trigger").mouseenter(function() { 
    $("#drop_down").stop().slideDown(250); 
}); 

$("#drop_down").mouseleave(function() { 
    $(this).stop().slideUp(250); 
});

來源

2013-07-24 11:57:52 Array

哈哈awsome，答案有時這麼簡單。我一直在努力掙扎幾個小時。我感到很蠢現在:(非常感謝！） – Julez

祝你好運喲你:)希望你會幫助別人在未來:) – Array

你也可以防止傳播與功能（電子）{e.stopPropagation（）; 。$（「＃DROP_DOWN」）停止（）了slideDown（250）;}'。這將確保沒有其他事件被觸發 – TecHunter

試試下面的代碼：

JS在CSS

$("div#drop_down").hide(); 

$("p.login_trigger").mouseenter(function() { 
    $("#drop_down").slideDown(250); 
}); 

$("p.login_trigger").mouseleave(function() { 
    $("#drop_down").slideUp(250); 
});

製作以下變化：

div#login_area div#drop_down { 
    top:47px;  
}

HERE IS JSFIDDLE DEMO

來源

2013-07-24 12:28:40

下拉菜單幾乎可以工作，但並不完美

回答

相關問題