Question

我有一个弹出式div，仅在单击特定按钮时显示。它甚至在点击同一个按钮时隐藏。我的问题是，我也想在外面任何地方点击时隐藏div。我无法这样做，因为popup div在主包装类中，并且不能通过在包装类上使用click事件并使其隐藏来实现。这是我的代码：

function showHide() {
    var ele = document.getElementById("div_fieldWorkers");

    if (ele.style.display == "block") {           
        ele.style.display = "none";
    } else {
        ele.style.display = "block";      
    }
}

<input type="button" value="Add Field Worker" id="btnFieldWorkers" onclick="return showHide();" class="btn btn-primary" />

Answer 1

检查出来：http://jsfiddle.net/d4SsZ/1/

修订：http://jsfiddle.net/d4SsZ/3/

只是一个片段：验证null和undefined js错误（如果有）。

标记：

<div id="div_fieldWorkers" class="form_size" style='display:none;' class='noclick'><span class='noclick'>Hello How are you?</span></div>
<input
    type="button"
    value="Add Field Worker"
    id="btnFieldWorkers"
    class="btn btn-primary" />

Javascript：

 $('#btnFieldWorkers').bind("click", ToggleDisplay);

function ToggleDisplay() {
    if ($("#div_fieldWorkers").data('shown'))
        hide();
    else 
        display();
}

function display() {    
    if ($("#div_fieldWorkers").children().length > 0) {
        $("#div_fieldWorkers").fadeIn(500, function() {
            $(document).bind("click", function() {hide(); });            
            $("#div_fieldWorkers").data('shown', true)});         
    }  
}

function hide() {   
    if (window.event.toElement.className != 'noclick') {
        $("#div_fieldWorkers").fadeOut(500, function() {
            $(document).unbind("click");
            $("#div_fieldWorkers").data('shown', false);                
        });
    }
}

Answer 2

遇到同样的问题，提出了这个简单的解决方案。它甚至可以递归工作：

$(document).mouseup(function (e)
{

var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    container.hide();
}
});

Answer 3

此问题的解决方案如下： Use jQuery to hide a DIV when the user clicks outside of it

此外，您标记了此问题 jquery ，但您的代码是纯javascript。使用jQuery时，只能编写

$('#div_fieldWorkers').toggle();

onclick 中的

。

Answer 4

在body元素和stopPropagation上创建click事件。这使得事件仅在按钮上调用click事件。然后检查click目标元素是不是弹出div。例如：

$(function(){
   $("#btnFieldWorkers").click(function(e){       
       e.stopPropagation();
       $("#div_fieldWorkers").show();
       $("body").click(function(e){
           if(e.target.id != "div_fieldWorkers")
           {
               $("#div_fieldWorkers").hide();
               $("body").unbind("click");
           }
       });
   });

});

jsfiddle

Answer 5

document.addEventListener('click', function () {
  document.querySelector('.menu').classList.remove('active');
});

document.querySelector('.toggle-menu-btn').addEventListener('click', function (event) {
  document.querySelector('.menu').classList.toggle('active');
  event.stopPropagation();
});

document.querySelector('.menu').addEventListener('click', function (event) {
  event.stopPropagation();
});

Answer 6

你也可以通过点击弹出div来隐藏弹出窗口。为此你需要在div标签中提供点击功能。在那个点击功能中你必须编写关闭弹出功能。

在外面点击时关闭弹出窗口div

6 个答案: