Question

我必须使用弹出式脚本，其中使用变量的true或false值切换popup。像这样：

var iconvideoneww = true;

$('.icontrigger').click(function(){
if(iconvideoneww){
$('.iconvideopop').fadeIn(80);
}
    else{
$('.iconvideopop').fadeOut(80);    
    }
    iconvideoneww =!iconvideoneww;
});

切换工作正常。问题是，我还需要一个脚本，点击它外面的任何地方都会隐藏弹出窗口。现在我添加这样一个脚本，会发生的是弹出窗口仍然在＆＃39; if＆＃39;上面代码的步骤，并点击它外面的任何地方隐藏它，现在如果我再次点击触发按钮打开弹出窗口，代码开始转到＆＃39; else＆＃39;步骤，而我希望它去＆＃39;如果＆＃39;。点击外部任何地方隐藏弹出窗口的代码是：

$(document).mouseup(function (event) {
    var container1 = $(".tagevent-content");
    if (container1.has(event.target).length === 0) {
        container1.hide();
        toggleEventState = false;
    }
});

小提琴：https://jsfiddle.net/p969ohh7/ 任何帮助，将不胜感激。感谢

Answer 1

如果我是你，我会单独保留弹出状态变量并对实际元素的状态起作用：

$('.icontrigger').click(function(){
    var $popup =  $('.iconvideopop');
    if (!$popup.is(':visible')) {
        $popup.fadeIn(80);
    } else {
        $popup.fadeOut(80);    
    }
});

我使用$ popup存储jQuery元素，只是为了避免使用选择器要求它3次...使用is（'：visible'）将更准确，因为它直接检查元素的状态，并确定相应的行动。

您也可以使用对象来完成工作，或者在显示弹出窗口时可以更改onmouseup事件。在没有显示弹出窗口时删除它，这将是最佳步骤，但对于一个事件，它并不是真正需要IMO。

编辑：这是我想到的对象......

var toggleable = function(selector){
    return {
        $element:$(selector),
        toggle:function(){ //Decides to display or hide the element.
            if (!this.$element.is(':visible')) {
                this.show();
            } else {
                this.hide();    
            }
        },
        show:function(){ //Displays the element
             this.$element.fadeIn(80);
        },
        hide:function(){ //Hides the element
             this.$element.fadeOut(80);
        }
    };
}

var iconvideopop = toggleable('.iconvideopop');
$('.icontrigger').click(function(){iconvideopop.toggle();});
$(document).mouseup(function(){iconvideopop.hide();});

EDIT2：为防止弹出窗口在单击时关闭（当我们在文档上搜索单击时），建议执行以下操作：

function myEventHandler(event){
    if (!$(event.target).closest('.iconvideopop').length) {
        //We clicked anywhere on the document BUT on .iconvideopop or its children. We can therefor close the pop-up.
    }
}

Answer 2

这是你做的：

注册单击图像以显示弹出窗口。注册另一个文档以隐藏它，但阻止点击事件从弹出窗口弹出.stopPropagation()。

https://jsfiddle.net/p969ohh7/5/

$(".icontrigger").click(function (e) {
    var $popup = $(".iconvideopop");
    if (!$popup.is(":visible")) {
        $popup.fadeIn(80);
    } else {
        $popup.fadeOut(80);
    }
    e.stopPropagation();
});

$(document).click(function () {
    var $popup = $(".iconvideopop");
    if ($popup.is(":visible")) {
        $popup.fadeOut(80);
    }
});

$(".iconvideopop").click(function (e) {
    e.stopPropagation();
});

弹出窗口没有关闭再次点击

2 个答案: