Question

这是我的代码：

<div class="container" role="main">
    <li><a href="javascript:void(0);" onclick="showAssignLabelsInMain(this);">Assign Labels</a></li>
    <div class="labelListInMain" id="labelListInMain">
        <g:render template=""/>
    </div>
</div>

function showAssignLabelsInMain(elm) {
        $.ajax({type: 'POST',
            url: '${createLink(controller: "HRAdmin", action: "labelListInMain")}',
            success: function (data, textStatus) {
                $('#labelListInMain').html(data);
            }
        });
        var offset = $(elm).offset();
        $("#labelListInMain").css({top: offset.top + 25, left: offset.left - 18, position: 'absolute'});
        $('#labelListInMain').toggle('fast');

$(".container").mouseup(function (e) {
        var subject = $("#labelListInMain");
        alert(e.target.id)

        if (e.target.id != subject.attr('id')) {
            subject.fadeOut();
        }
    });

这意味着当我点击按钮时，将显示切换，但当我在该切换内部点击时，它会淡出。它不应该淡出，我不知道什么是错的。

Answer 1

$(".link").click(function(e){
e.preventDefault();
$(".popup").fadeIn(300,function(){$(this).focus();});
});

$('.close').click(function() {
 $(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
 $(this).fadeOut(300);
});

Demo

希望它适合你

Answer 2

您也可以使用其他方法

$(".container").click(function (e) {
    var subject = $("#labelListInMain");

    if (!$(e.target).closest('.labelListInMain').length) {
        subject.fadeOut();
    }
});

Answer 3

你的问题似乎与这样的事情有关

How to have click event ONLY fire on parent DIV, not children?

你希望div在单击.container时淡出但是如果是单击的切换是否正确？和toggle是.container的孩子试着看一下 http://api.jquery.com/children/

鼠标悬停事件出错

3 个答案: