Js实现原生二级菜单「建议收藏」

Js实现原生二级菜单「建议收藏」<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><metahttp-equiv=”X-…

大家好,又见面了,我是你们的朋友全栈君。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>二级菜单</title>
    <style>
        span{
            background-color: pink;
        }
        #menu{
            background-color: orange;
            width: 90px;
            font-size: 30px;
            text-align: center;
            cursor: pointer;
            margin: auto;
            margin-top: 100px;
        }
        .fold{
            height: 30px;
            overflow: hidden;
        }
        a{
            font-size: 20px;
        }
    </style>
   
</head>
<body>
    <div id="menu">
        <div class="fold"><span>羊村</span>
            <br>
            <a href="#">喜羊羊</a><br>
            <a href="#">美羊羊</a><br>
            <a href="#">懒羊羊</a><br>
            <a href="#">懒羊羊</a><br>
        </div>
        <div class="fold"><span>羊村</span>
            <br>
            <a href="#">喜羊羊</a><br>
            <a href="#">美羊羊</a><br>
            <a href="#">懒羊羊</a><br>
            <a href="#">美羊羊</a><br>
            <a href="#">懒羊羊</a><br>
        </div>
        <div class="fold"><span>羊村</span>
            <br>
            <a href="#">喜羊羊</a><br>
            <a href="#">美羊羊</a><br>
            <a href="#">懒羊羊</a><br>
            <a href="#">喜羊羊</a><br>
            <a href="#">美羊羊</a><br>
            <a href="#">懒羊羊</a><br>
        </div>
    </div>
</body>
<script src="./tools.js"></script>
<script>
var spans = document.getElementsByTagName('span'); //获取span标签
var opendiv = spans[0].parentNode;
removeClass(opendiv,'fold');

 for(var i = 0; i < spans.length; i++){
    spans[i].onclick = function(){
        var clickdiv = this.parentNode;
       // alert(clickdiv);
        menutoggle(clickdiv);
       // toggleClass(clickdiv,'fold');
        if(opendiv!=clickdiv && !hasClass(opendiv,'fold')){
            //addClass(opendiv,'fold');
            //toggleClass(opendiv,'fold');
            menutoggle(opendiv);
        }
        opendiv = clickdiv;

    }
}
/* 定义菜单切换以及动画效果 */ 
function menutoggle(obj){
    //在切换样式之前元素的高度
    var begin = obj.offsetHeight;
    //切换样式
    toggleClass(obj,'fold');
    //切换之后的高度
    var end = obj.offsetHeight;
    //将元素样式切换到变化前,来设置动画效果
    obj.style.height = begin + 'px';
    obj.style.overflow = 'hidden';
    move(obj,'height',end,10,function(){
        obj.style.height = ""; //内联样式取消,防止影响下次触发动画样式不变
    });

}

</script>

</html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135395.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 简述交换机vlan配置步骤_华为交换机loopback配置

    简述交换机vlan配置步骤_华为交换机loopback配置交换机VLAN配置基础及实例有关VLAN的技术标准IEEE802.1Q早在1999年6月份就由IEEE委员正式颁布实施了,而且最早的VLNA技术早在1996年Cisco(思科)公司就提出了。随着几年来的发展,VLAN技术得到广泛的支持,在大大小小的企业网络中广泛应用,成为当前最为热门的一种以太局域网技术。本篇就要为大家介绍交换机的一个最常见技术应用–VLAN…

  • 虚拟机连网(多台虚拟机互联、虚拟机与真机互联、虚拟机上网)

    虚拟机连网(多台虚拟机互联、虚拟机与真机互联、虚拟机上网)一)通常虚拟机中下载安装配置完系统之后自动选择的是NAT(用于共享主机IP)此时真机和虚拟机是可以ping通的,但是此时虚拟机是不能上网的(也就是尝试ping通www.baidu.com时无法ping通);

  • asp.net mvc 下拉框级联

    asp.net mvc 下拉框级联给自己需要级联的控制器添加要级联的下拉框获取#region//获取宿舍楼[HttpPost]publicActionResultDrom(stringid){objectobj=getDrom(id);returnJson(obj);}//获取宿舍楼publicList<SelectList.

  • 怎么彻底卸载mysql8.0_彻底卸载MySQL8.0

    怎么彻底卸载mysql8.0_彻底卸载MySQL8.0彻底卸载MySQL8.0(WIN10)环境需求win10MySQL8.0彻底卸载1.停止MySQL服务启动任务管理器—>选择服务—->找到MySQL—->右键停止如果有多个MySQL服务,也全部都要停掉2.卸载MySQL相关所有组件打开看控制面板—->卸载程序—->卸载与MySQL相关的所有组件3.删除MySQL安装目录下的MySQL文件夹如果在其…

  • Pycharm全局搜索快捷键失效「建议收藏」

    Pycharm全局搜索快捷键失效「建议收藏」问题很久没用pycharm的全局收缩快捷键。今天一用,发现用不了。后面才发现是与win10自带的输入法的繁简体切换快捷键冲突了。解决

  • 2017.8.22

    2017.8.22

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号