为什么在外部单击时div不隐藏？答案

【问题标题】：Why does the div not hide when clicking outside of it?为什么在外部单击时div不隐藏？
【发布时间】：2015-11-25 05:10:57
【问题描述】：

我试图让 div 隐藏，但它没有。 Here 是一个显示问题的流星垫。

点击外部后如何隐藏。

如果流星垫没有加载，这里是代码

if (Meteor.isClient) {
  Template.hello.events({
    'click #loginbntstoggle' : function(e){
        if(document.getElementById("textoneandtwo").style.display=="none"){
            document.getElementById("logitextoneandtwonbnts").style.display = "block";
        }else{
            document.getElementById("textoneandtwo").style.display = "none";
        }
    },

  'click body' : function(e){
    if(e.target.className !== "textoneandtwo")
    {
      document.getElementById("textoneandtwo").style.display = "none";
    }
  }
});
}

HTML

<head>
  <title>test</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">

<button id="onoroff"
        class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<div id="textoneandtwo" style="display: none;">
    <form action="#">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="sample3" />
            <label class="mdl-textfield__label" for="sample3">Text...</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="sample3" />
            <label class="mdl-textfield__label" for="sample3">Text...</label>
        </div>
    </form>
</div>

</template>

【问题讨论】：

该链接不会在此处加载。
抱歉流星垫有问题我会添加问题的代码
@Cyrbil

标签： javascript jquery html css meteor

【解决方案1】：

我认为下面的代码可以帮助你。只需将您的 div 元素 id 放在下面的代码中：

function bodyClickHandller(evt){
    if(!($.contains(divElement, evt.target)) || (divElement == evt.target))){
        $(divElement).hide();
    }
}
$("body").off("click").on("click", bodyClickHandller);
var divElement = document.getElementById("div_element_id");

如果您遇到任何问题，请告诉我。

【讨论】：

我编辑了meteor pad 以显示您的代码返回的错误。错误是 Unexpected token ( 在 $ 之后
是的，我知道流星和 jquery 在一起很奇怪，看看this