欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

点击链接/按钮显示div区域，点击其他区域再隐藏之前显示的div

程序员文章站 2022-05-05 19:09:07
...

情形：

页面上有一个链接（也可以写成按钮），当点击该链接时，显示出一个div框，框内的内容自定义

代码：

页面上的两个控件，div的样式可以自定义进行修改：

<a id="myA" href="#" οnclick="showDiv()">显示div</a>
<div id="myDiv" style="display: none; background-color: burlywood; color: black;"></div>

showDiv()方法：

function showDiv () {
    $('#myDiv').css('display', 'block')
    $('#myDiv').html('Hello World')
}

div区域显示之后，当点击除该div及a标签外的其他区域时，隐藏该div：

$(document).bind('click', function(e) {
	var e = e || window.event; //浏览器兼容性 
	var elem = e.target || e.srcElement;
	if (elem.id && (elem.id == 'myDiv' || elem.id == 'myA')) {
		return;
	}
	$("#myDiv").css("display", "none");
	$("#myDiv").html('') // 清空文本内容
});

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type='text/javascript' src='../lib/jquery.min.js'></script>
</head>
<body>
  <a id="myA" href="#" οnclick="showDiv()">显示div</a>
  <div id="myDiv" style="display: none; background-color: burlywood; color: black;"></div>

  <script type='text/javascript'>
    function showDiv () {
      $('#myDiv').css('display', 'block')
      $('#myDiv').html('Hello World')
    }

    $(document).bind('click', function(e) {
      var e = e || window.event; //浏览器兼容性 
      var elem = e.target || e.srcElement;
      if (elem.id && (elem.id == 'myDiv' || elem.id == 'myA')) {
        return;
      }
      $("#myDiv").css("display", "none");
      $("#myDiv").html('') // 清空文本内容
    });
  </script>
</body>
</html>

 

上一篇： jq 点击按钮显示隐藏DIV区域

下一篇： Oracle数据库RMAN恢复之数据文件的恢复

推荐阅读