懸停時可以簡單地向下滑動面板，鼠標懸停時可以向上滑動

Question

對於我的網站，我需要創建一個帶有鏈接按鈕的菜單，該菜單在懸停時會向下滑動其他鏈接按鈕。

平滑的“向下滑動/向上滑動”面板，當我懸停鏈接按鈕時向下滑動，而當鼠標不是鏈接按鈕或滑動面板中的內容時向上滑動

代碼可以正常工作，但是沒有錯誤，但是當我懸停鏈接按鈕時，滑動面板就像跳舞一樣上下移動而沒有移動鼠標，而當我嘗試到達其中的內容時，有時關閉卻沒有。

檢查了一些谷歌並找到了與我相同的解決方案，我想這是我的CSS中的東西

jQuery：

  $(document).ready(function() { $("#nav1").mouseover(function() { $("#nav1extender").slideDown("slow"); }); $("#nav1").mouseout(function() { $("#nav1extender").slideUp("slow"); }); }); 

 .navigator { position: fixed !important; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 20vw; height: 100vh; background-color: #333333; z-index: 1; } .NavButton { position: relative; width: 100%; text-align: center; float: left; text-anchor: middle; color: white; text-decoration: none; font-size: 25px; left: 0; bottom: 0; right: 0; font-family: 'Arial Unicode MS'; } .container { width: 99vw; height: 220vh; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager> <asp:Panel runat="server" ID="container" CssClass="Container"> <asp:Panel runat="server" ID="navigator" CssClass="navigator"> <div style="position:relative;top:10vh;"> <div id="nav1" style="position:relative;"> <asp:LinkButton runat="server" ID="NavButton1" CssClass="NavButton" OnClick="NavButton1_Click"></asp:LinkButton> <div id="nav1extender" style="position:relative;width:100%;height:100px;display:none;background-color:#333333;z-index:2;top:3px;"> asd <br />asd <br />asd <br /> </div> </div> 

Answer 1

使用jQuery懸停方法：

$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);

此方法將同時處理mouseover和mouseout。

因此，我將以這種方式重寫您的代碼：

$( "#nav1" ).hover(
  function() {
    $("#nav1extender").slideDown("slow");
  }, function() {
    $("#nav1extender").slideUp("slow");
  }
);

此代碼將觸發slideUp作為slideDown的回調，並應解決您的問題