为什么在div外部单击时div无法隐藏？

Question

我正在尝试使div隐藏，但事实并非如此。 这是显示问题的流星垫。

在其外部单击后如何隐藏它。

如果流星垫未加载，这是代码

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>

Answer 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");

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

为什么在div外部单击时div无法隐藏？

问题描述

1 个解决方案

解决方案1
0 2015-08-31 08:27:21

为什么在div外部单击时div无法隐藏？

问题描述

1 个解决方案

解决方案1 0 2015-08-31 08:27:21

解决方案1
0 2015-08-31 08:27:21