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)


相关推荐

  • 对路径“xxxxx”的访问被拒绝。

    对路径“xxxxx”的访问被拒绝。对路径“D:\\Weixin\\WechatWeb\\wapMxApi\\JsonFile\\WaterPrice.json”的访问被拒绝。本地vs2013编译调试是没有问题的但是发布后就不能倍访问

  • 微信小程序轮播图调用接口

    微信小程序轮播图调用接口生命周期函数,页面加载:onLoad:function(options){let_this=this;wx.request({url:’http://www.day.com/index.php/img’,//仅为示例,并非真实的接口地址method:”GET”,success(res){//console.log(res.data.data)letdatas=res.data.data;//渲染_this.setData({datas})},}

  • pycharm2019.2.6版本改中文_pycharm怎么更改python环境

    pycharm2019.2.6版本改中文_pycharm怎么更改python环境1.文件——设置——项目——python解释器2.点最右边的设置图标——添加3.选择现有环境——点击右边省略号4.找到你要的python版本的地址——找到python.exe——确定做完这些就完成了

  • MySQL 中 concat 函数

    MySQL 中 concat 函数MySQL中concat函数concat函数MySQL中concat函数MySQL中concat_ws函数MySQL中group_concat函数语法:concat(str1,str2,…)注意:返回结果为连接参数产生的字符串,如果有任何一个参数为NULL,则返回值为NULL。selectconcat(“a”,”b”,”c”);输出:abc注:Mysql的concat函数在连接字符串的时候,只要其中一个为NULL则返回值为NULL.sel

  • c++开源库rapidxml介绍与示例

    c++开源库rapidxml介绍与示例官方地址:http://rapidxml.sourceforge.net/官方手册:http://rapidxml.sourceforge.net/manual.html也可以在github上下载到别人上传的rapidxml:https://github.com/dwd/rapidxml1.头文件一般我们用到的头文件只有这三个#include”rapidxml/rapidxml.hpp”

  • 数字电路实验 05 – | 触发器及其应用[通俗易懂]

    数字电路实验 05 – | 触发器及其应用[通俗易懂]一、实验目的和任务掌握基本RS、JK、T和D触发器的逻辑功能。 掌握集成触发器的功能和使用方法。 熟悉触发器之间相互转换的方法。二、实验原理介绍触发器是能够存储1位二进制码的逻辑电路,它有两个互补输出端,其输出状态不仅与输入有关,而且还与原先的输出状态有关。触发器有两个稳定状态,用以表示逻辑状态“1”和“0”,在一定的外界信号作用下,可以从一个稳定状态翻转到另一个稳定状态,它是一个具有记忆功能的二进制信息存储器件,是构成各种时序电路的最基本逻辑单元。三、实验数据、计

发表回复

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

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