点击菜单 弹出层隐藏及显示
博客专区 > 木子jd 的博客 > 博客详情
点击菜单 弹出层隐藏及显示
木子jd 发表于1年前
点击菜单 弹出层隐藏及显示
  • 发表于 1年前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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;

 

共有 人打赏支持
粉丝 2
博文 15
码字总数 7602
×
木子jd
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: