1

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 を非表示にするにはどうすればよいですか?

4

2 に答える 2

1

このイベント ハンドラーを追加できます。

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

ここにフィドルがあります： フィドル

于 2013-03-06T11:35:31.840 に答える
0

.on() で複数のイベントを試してみませんか。

$("#colours li").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    click: function() {
        // Handle click...
    }
});
于 2013-03-06T11:33:23.973 に答える