我试图让 div 隐藏，但它没有。 Here是显示问题的 meteor 垫。
如何让它在点击外面后隐藏。
这是 meteor 垫不加载时的代码
JS
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>
最佳答案
我认为下面的代码可以帮助你。只需将您的 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");
如果您遇到任何问题，请告诉我。
关于javascript - 为什么单击外部时 div 不隐藏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32306637/