jQuery的UL列表如何隱藏股利和隱藏下拉

Question

HTML：

<div id="colourlist">test 1</div> 
<ul id="colours"> 
<li value="1">test 1</li> 
<li value="2">test 2</li> 
<li value="3">test 3</li> 
<li value="4">test 4</li>  
</ul> 
<div id="preview"></div> 

的jQuery：

$("#colours li").on('mouseenter', function(){ 
    $("#colours li").removeClass("hilight"); 
    $(this).addClass("hilight"); 
    var O = $(this).offset(); 
    var CO = $("#colours").offset(); 
    $("#preview").css("top", O.top-150).show(); 
    $("#preview").css("left", CO.left+160); 
}).on('click', function(){ 
    var text = $(this).text(); 
    $("#colourlist").text(text); 
    $("#colours").hide(); 
    $("#preview").hide(); 
}); 
$("#colourlist").on('click', function(e){ 
    e.preventDefault(); 
    $("#colours").toggle(); 
}); 

這裏是的jsfiddle：http://jsfiddle.net/CJbeF/48/

如何隱藏下拉列表並預覽時，點擊UL下拉列表之外？

如何在打開下拉菜單並再次點擊下拉菜單時隱藏預覽div？

Answer 1

您可以添加此事件處理程序：

$("#colours").on('mouseleave', function(){ 
    $("#colours").hide(); 
    $("#preview").hide(); 
}); 

這裏有一個小提琴： fiddle

Answer 2

爲什麼不在.on（）中嘗試多個事件。

$("#colours li").on({ 
    mouseenter: function() { 
     // Handle mouseenter... 
    }, 
    click: function() { 
     // Handle click... 
    } 
});