单击input div 隐藏和显示点击div之外的元素隐藏div 点击里面的元素不隐藏

最新推荐文章于 2022-05-17 17:09:29 发布

秋枫_fly

最新推荐文章于 2022-05-17 17:09:29 发布

阅读量4.8k

点赞数

分类专栏： css div 文章标签： css div 隐藏和显示

本文链接：https://blog.csdn.net/whs19910204648688/article/details/12062763

版权

css div 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.定义样式写一个css文件
.input{
width:220px;
position: absolute;
left:20px;
float:clear;
top:20px;
height:10px;
}
.test {
position: absolute;
left:20px;
top:40px;
width:auto;
float:left;
height:120px;
overflow-y:auto;
border:1px solid;
display:none;
background-color:#FFF;
}

2. 写html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</script>
</head>

<body>

<input type="text" id="tt" name="tt" class="input" />
<div id="tssss">
<div class="test" id="div">
<ul>dsfsdadfsafdssad<br />
<li>dsaasdfsadfddfdsfds
</li>
<li>dsaasdfsadfddfdsfds
</li>
<li>dsaasdfsadfddfdsfds
</li>
<li>dsaasdfsadfddfdsfds
</li>
<li>dsaasdfsadfddfdsfds
</li>
<li>dsaasdfsadfddfdsfds
</li>
</ul> </div>
</div>

<div >
dsfsdadfsafdssad<br />
dsaasdfsadfddfdsfdsfds<br />dsfsdadfsafdssad<br />
dsaasdfsadfddfdsfdsfds<br />
dsfsdadfsafdssad<br />
dsaasdfsadfddfdsfdsfds<br />
dsfsdadfsafdssad<br />
dsaasdfsadfddfdsfdsfds<br />
dsfsdadfsafdssad<br />
dsaasdfsadfddfdsfdsfds<br />
dsfsdadfsafdssad<br />
dsaasdfsadfddfdsfdsfds<br />
dsfsdadfsafdssad<br />
dsaasdfsadfddfdsfdsfds<br />

asfsda
fsdfsd</div>

</div>
</body>
</html>