jQuery向下滑動div - 當它結束時消失

我正在做一個向下滑動選項的向下滑動菜單。jQuery向下滑動div - 當它結束時消失

我使用下面的jQuery

$(document).ready(function() { 
    $(".menu_item").hover(function() { 
     $(".menu_options").slideDown(400); 
    }, function() { 
     $(".menu_options").slideUp(400); 
    }); 
});

我的問題是，當它滑下，我去到已經滑下消失股利 - 這裏是設立

截圖

Screenshot

這一領域的HTML是

<div class="menu"> 
      <div class="menu_item" id="1"> 
       Landlord Packages 
      </div> 
      <div class="spacer"></div> 
      <div class="menu_item"> 
       Single Items 
      </div> 
      <div class="menu_options" id="1"></div> 
     </div>

預先感謝您的幫助:-)

的jsfiddle腳本http://jsfiddle.net/pCTXq/

來源

2013-04-23 AppleTattooGuy

你也可以包括你的CSS嗎？或者更好的是，提供一個jsFiddle的例子？ – cfs 2013-04-23 14:09:14

@cfs :-)感謝做了該 – AppleTattooGuy 2013-04-23 14:13:52

同類話題的其他還有： http://stackoverflow.com/questions/7085758/jquery-mousover-on-a-div-open-submenu-which-應該保持打開時鼠標/ 7085858＃7085858 祝你好運！ – dropuse 2013-04-23 14:15:28

嘗試

$(document).ready(function() { 
    $(".menu_item, .menu_options").hover(function() { 
     $(".menu_options").stop(true, true).slideDown(400); 
    }, function() { 
     $(".menu_options").stop(true, true).delay(10).slideUp(400); 
    }); 
});

這應該做你所需要的。

我的小提琴：http://jsfiddle.net/MCvsd/54/

編輯：您提供的小提琴，更新：http://jsfiddle.net/pCTXq/1/

來源

2013-04-23 14:11:32 tymeJV

非常感謝您的幫助 - 雖然我在.menu_item上的懸停漸變消失了，但顯然我並沒有在這方面徘徊 - 這可以在jQuery中修復 - 非常感謝您的幫助。 – AppleTattooGuy 2013-04-23 14:16:46

你應該能夠用'.addClass'和'.removeClass'完成這個問題解決它 - http://stackoverflow.com/questions/4358964/jquery-hover-addclass-problem – tymeJV 2013-04-23 14:18:59

謝謝你:-)工作正常，但我不確定在哪裏刪除類 - 我已經更新JSfiddle http://jsfiddle.net/pCTXq/2/ – AppleTattooGuy 2013-04-23 14:31:12

這裏的問題是，你看對.menu_item懸停滑動.menu_options下來，但由於.menu_options是.menu_item之外，移動鼠標到.menu_options將會隱藏它。

您可以通過在每個.menu_item div中嵌套您的.menu_options來解決此問題。用JSfiddle或codepen（用你的css）解決這個問題是很好的。

<div class="menu"> 

    <div class="menu_item" id="1"> 
     Landlord Packages 
    </div> 

    <div class="spacer"></div> 

    <div class="menu_item"> 
     Single Items 
    <div class="menu_options" id="1"></div> 
    </div> 
</div>

來源

2013-04-23 14:11:12

嵌套的方式，但如果你仍然DONOT想使用嵌套的，可以按如下

$(document).ready(function() { 
    $(".menu_item").hover(function() { 
     $(".menu_options").slideDown(400); 
    }); 
    $(".menu_options").mouseleave(function() { 
     $(".menu_options").slideUp(400); 
    }); 
});

做些什麼

來源

2013-04-23 14:16:13 panther

jQuery向下滑動div - 當它結束時消失

回答

相關問題