您的位置：首页 > 其它

点击菜单弹出层隐藏及显示

2016-12-02 00:00 369 查看

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>菜单点击下拉框出现</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="jquery-1.11.3.min.js"> </script>
<script src="text.js"> </script>
<style>
.cont {
width: 200px;
margin: 100px 0;
background: red;
}
.cont1,
.cont2 {
opacity: 0;
height: 0;
}

.tab1 .cont1,
.tab2 .cont2 {
transition: all .5s ease;
opacity: 1;
height: 200px;
}
</style>
</head>
<body>
<ul>
<li ref="tab1"><a href="">tab1</a></li>
<li ref="tab2"><a href="">tab2</a></li>
</ul>
<ul class="cont">
<li class="cont1"><a href="">ocntent1</a></li>
<li class="cont2"><a href="">ocntent2</a></li>
</ul>
</body>
</html>

index.js
$(document).ready(function () {
$("li").click(function (e) {
e.preventDefault();
$this=$(this);

$("body").removeClass().addClass($this.attr("ref"));

});
});

思路：

点击菜单出现弹出层的制作窍门：
在点击的时候在 body addClass / removeClass
通过 这个Class 覆盖 弹出层的显示及隐藏
其他 弹出层同理
在父元素 + / - Class的方案
选要有动画的元素 全部 + transition: all .5s ease;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 点击菜单弹出层隐藏及显示

相关文章推荐

新的分享

章节导航

点击菜单 弹出层隐藏及显示

点击菜单弹出层隐藏及显示