為什么在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