0

此代码显示从按钮单击时的 div，但我想在用户单击其他位置或单击 div 中的项目时隐藏 div。

function show_menu(){
    var menu = document.getElementById('dropdown_menu');

    if(menu.style.display == 'block'){
        menu.style.display = 'none';
    }else {
        menu.style.display = 'block';                    
    }
}
4

3 回答 3

2

鉴于这个简化的 HTML：

<div id="myDiv"> myDiv </div>

使用这个简化的 javascript：

var div = document.getElementById("myDiv");

// event gets passed and represents the DOM event

document.onclick = function( event ){
    console.log("outside");
    if( event.toElement !== div ){
        div.style.visibility = "hidden";
    }
};

div.onclick = function( event ){
    console.log("inside");
    event.toElement.style.visibility = "hidden";
}

无论您是否点击它，这基本上都会隐藏您的 div，所以我不完全确定它的应用程序。所以简而言之，如果你想隐藏 div 是否有人在里面或外面点击，只需使用以下内容，但话又说回来，我看不出它的用处：

document.onlick = function(){ 
  document.getElementById("myDiv").style.visibility = "hidden";
}
于 2013-11-03T07:27:03.147 回答
0

使用.children() selector
http://api.jquery.com/children/

演示：http: //jsfiddle.net/WMJc5/2/

<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <style>
  #mydiv p,#mydiv a,#mydiv h3,#mydiv div,#mydiv span{background-color:red;}
 </style>
</head>
<body>
    <div id="mydiv" style="border:1px solid;">
    <p>p tag</p>
      <a >a tag</a><br>
      <h3>H3</h3><br>
      <div>inner div</div><br>
      <span>444</span>
    </div>
   <script>
   $( "#mydiv *" ).click(function () {$( "#mydiv" ).hide();});
  </script>
</body>
</html>
于 2013-11-03T07:52:26.307 回答
0

假设您的评论是在告诉我们您真正想要什么，那么像这样

Live Demo

$(function() {
  $("#to_folder").on("change",function() {
    $(".folder").hide();
    var folderId = this.value;
    if (folderId !="") {
      $("#folder"+folderId).show();
    }
  });
  $("#to_folder").trigger("change"); // show/hide whatever matches the select
});

使用

<select id="to_folder" name="to_folder"> 
  <option value="">- move to folder -</option> 
  <option value="0"> / </option> 
  <option value="1">folder 1</option> 
  <option value="2">folder 2</option> 
</select>
<div class="folder" id="folder0">/</div>
<div class="folder" id="folder1">1</div>
<div class="folder" id="folder2">2</div>

最初隐藏的 div

于 2013-11-03T16:30:49.833 回答