jquery下拉無限高度（slideUp和slideDown）

基本上我通過使用slideUp和slideDown函數創建了一個帶jquery的下拉菜單。一切都運行良好，直到我認爲如果我繼續通過列表懸停鼠標，子按鈕的高度不會停止。我們可以看到，邊界左擴展。任何方式來避免這種情況？jquery下拉無限高度（slideUp和slideDown）

我創建了一個小提琴，這樣你們可以知道我在說什麼http://jsfiddle.net/WGm8q/

反正這裏的代碼：

$('.button').hover(
    function() { 
     $('.sub', this).stop().slideDown(100); 
    }, 
    function() { 
     $('.sub', this).stop().slideUp(100); 
    } 
);

CSS

.menu { 
    width: 850px; 
} 
.button .main { 
    padding-bottom: 5px; 
    cursor: pointer; 
} 
.button .sub { 
    display: none; 
    margin-left: 10px; 
    padding: 10px 0 10px 0; 
    border-left: 1px solid #CCC; 
} 
.button .sub p { 
    background-color: #FFF; 
    margin: 0; 
    padding-left: 5px; 
}

HTML

<div class="menu"> 
    <div class="button"> 
     <div class="main">Menu 1</div> 
     <div class="sub">      
      <p>Submenu 1</p>     
      <p>Submenu 1</p>     
      <p>Submenu 1</p>     
      <p>Submenu 1</p>     
      <p>Submenu 1</p>     
      <p>Submenu 1</p>     
      <p>Submenu 1</p> 
     </div> 
    </div> 
</div>

來源

2013-02-02 coldpumpkin

Your Fiddle

更改此：

.button .sub { 
display: none; 
margin-left: 10px; 
padding: 10px 0 10px 0; 
border-left: 1px solid #CCC; 
}

分爲：

.button .sub { 
display: none; 
margin-left: 10px; 
border-left: 1px solid #CCC; 
}

來源

2013-02-02 17:22:04

它工作。但是，這種方式我沒有延長線。沒有辦法繞過它？ – coldpumpkin

填充是你的問題，解決這個問題的方法是在你的菜單中添加一個固定的高度（但有它自己的問題），或者可能在另一個沒有高度但有邊框和填充的div中「包裝」你的子菜單（沒有測試它...） –

另一種可能是最好的解決方案是添加填充到您的最後或第一個菜單項...類似這樣http://jsfiddle.net/THWhZ/ –

這傢伙有一個小提琴的寶石，將清理你的問題太多我相信：

http://jsfiddle.net/nick_craver/GgdEM/1/

與這一個問題就出在跳躍菜單，我想這可能是你的邊界問題的原因（事件觸發全力screwey）。

關鍵是有一個超時，當再次懸停時會自行清除。

JQuery dropdown menu using slideup and slidedown on hover is jumpy

爲此，他通過每個菜單項，以便每個項目涉及獨立的數據屬性。

請看：

$(function() {  
    $('#nav li').hover(function() { 
    clearTimeout($.data(this, 'timer')); 
    $('ul', this).stop(true, true).slideDown(200); 
    }, function() { 
    $.data(this, 'timer', setTimeout($.proxy(function() { 
     $('ul', this).stop(true, true).slideUp(200); 
    }, this), 200)); 
    }); 
});

他的小提琴似乎沒有任何邊界問題，要麼所以也許看看他的標記和CSS。

來源

2013-02-02 17:30:28 mattdlockyer

它很相似。雖然在我的情況下，顯然我只是不得不刪除填充。他的情況也很有用 - 即使當他用鼠標消失並返回一段時間時，下拉恢復:) – coldpumpkin

jquery下拉無限高度（slideUp和slideDown）

回答

相關問題