側邊欄子菜單元素沒有顯示/隱藏，因爲他們應該

我想創建一個簡單的邊欄爲我的網站使用jquery，我有一些麻煩與它的懸停功能。當用戶懸停在某個類別上時，會出現一個子菜單。如果上面或下面的類別被徘徊，我希望子菜單關閉。我創建了一個jsFiddle來幫助顯示我的問題以及子菜單如何不像應該那樣關閉。我一直試圖弄清楚這幾個小時，我非常感謝任何幫助。側邊欄子菜單元素沒有顯示/隱藏，因爲他們應該

http://jsfiddle.net/BGcDc/7/

謝謝。

來源

2012-06-06 AnchovyLegend

你忘了在mouseleave函數中隱藏你的子部分。只需添加$(this).find(".submenu").hide();到現有的處理程序：

$(".category").mouseleave(function() { 
    $(this).find(".submenu").hide(); 
    $(this).css("background-color", "#eee"); 
    $(this).css("border", "1px solid grey"); 
    $(this).css("border-bottom", "none"); 
    $(this).css("width", "180px"); 
    $(".category:last").css("border-bottom", "1px solid grey"); 
});

來源

2012-06-06 03:08:45

完美！這正是我需要的！謝謝！ – AnchovyLegend

@MHZ如果這是你想要的，而不是將此問題標記爲正確。 – khurram

http://jsfiddle.net/ahren/BGcDc/8/

就在懸停開始添加$(".submenu").hide();。

來源

2012-06-06 03:07:46 ahren

你忘了隱藏表格

$(".category").mouseleave(function() { 

    $(this).find(".submenu").hide(); 

})

http://jsfiddle.net/BGcDc/10/

不過這可以通過CSS只能由麪糰被acomplished ..：

.category .submenu{ display:none} 
.category:hover .submenu{ display:block}

而你的所有.css（）邊界的corse（） S比的意義，它，如果你想使一個跨瀏覽器的動畫顯示/隱藏將可能是有意義的）

來源

2012-06-06 03:09:05

只需修改JavaScript像這樣：

$(".category").mouseleave(function() { 
    // add this 
    $(".submenu").hide(); 
    $(this).css("background-color", "#eee"); 
    $(this).css("border", "1px solid grey"); 
    $(this).css("border-bottom", "none"); 
    $(this).css("width", "180px"); 
    $(".category:last").css("border-bottom", "1px solid grey"); 
});

來源

2012-06-06 03:09:55 tjscience