類似Gmail的註銷

我有一個類似Gmail的註銷機制，因此，當您將鼠標懸停在用戶名上（位於右上角）時，它會滑下包含「註銷」鏈接的菜單。用戶名在浮動列表中，而滑出的菜單位於內部列表上（未浮動）。滑出/進入是使用jQuery執行的。類似Gmail的註銷

這是它應該做的：

內菜單向下滑動時，用戶名是徘徊在（變爲可見）;
如果鼠標移動到內部菜單，內部菜單應保持可見;
如果鼠標在其他地方盤旋，內部菜單應滑回（變爲不可見）。

這是它目前的作用：當用戶名徘徊在

內菜單滑下;
當光標離開用戶名時，菜單向上滑動 - 無論光標位於何處。

感知解決方案：我認爲應該有一個if條款的地方，檢查是否光標在內部列表上，並保持內部列表開放，就是這樣讓我難倒了一部分。

編輯：下面是當前的代碼：

HTML：

<ul id="user_spot"> 
    <li><a href="#"><span class="username">username</a> 
     <ul id="user_spot_links"> 
      <li><a href="/home/sign?out=y">Sign Out</a></li> <br /> 
     </ul> 
    </li> 
</ul>

CSS：

ul#user_spot li { 
    float:left; 
    position:relative; 
} 
ul#user_spot_links { 
    position:absolute; 
    top:20px; 
    display:none; 
} 
ul#user_spot_links li { 
    float:none; 
    clear:both; 
}

JS：

$('ul#user_spot li a').hover(function() { 
$('ul#user_spot_links').slideDown('slow'); 
    return false; 
}, function() { 
    // this is where I believe the needed code should be" 
    $('ul#user_spot_links').slideUp('slow'); 
});

來源

2011-12-28 Kneel-Before-ZOD

你想讓我們給你寫一個腳本嗎？我不認爲這是stackoverflow的點。 Stackoverflow是一個問答網站。 – omnidan 2011-12-28 14:53:04

你可以在你的問題中包含一些代碼嗎？請向我們展示您當前的解決方案以及迄今爲止您嘗試的內容。 – PPvG 2011-12-28 14:53:51

我不需要任何人給我寫一個腳本。我需要了解如何自己編寫腳本;我只需要幫助處理邏輯。當前代碼在第二秒內出現 – 2011-12-28 14:56:09

你不需要JS。

檢查此琴：http://jsfiddle.net/PaKnc/

基本上UL是下滑是你將鼠標懸停在李的孩子。你可以在CSS中操作一個孩子的CSS屬性。

例如：

#parent #child { 
    style1; 
} 

#parent:hover #child { 
    style2; 
}

這裏，style1和style2可以是完全不同的。在我們的案例中，我們通過改變display屬性來利用這一點。

來源

2011-12-28 15:30:31 techfoobar

謝謝你。這解決了這個問題。我仍然必須使用JS，因爲我喜歡動畫效果。但是你的確指出了我正確的方向，現在我可以解決它。謝謝。 – 2011-12-28 15:33:58

不客氣。 :) – techfoobar 2011-12-28 15:34:48

單獨使用CSS轉換，查看此更新的小提琴以獲取菜單的某些動畫。 http://jsfiddle.net/PaKnc/1/ [注意：這不會在IE] :) – techfoobar 2011-12-28 15:51:45

問題是，當您需要退出用戶名錨點以將鼠標懸停在下拉菜單上時。簡單的解決方案是將懸停選擇器更改爲li而不是a。然後，即使您保留在下拉菜單上，您也不會退出它。

來源

2011-12-28 15:32:23

類似Gmail的註銷

回答

相關問題