css+js实现下拉菜单栏_yuan487639的博客-程序员秘密_js下拉栏

技术标签: 前端插件  折叠菜单栏  

  • 直接上代码吧,没什么复杂逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
    <style type="text/css">
        .out {  
}   
.out + ul {  
    display: block;  
}  

.in {  
}  

.in + ul {  
    display: none;  
}  
</style>

<body>
<ul>  
<li>蔬菜</li>  
<li  class="has_son">水果</li> 
<ul>  
<li>二级菜单</li>  
<li>二级菜单</li>  
<li>二级菜单</li>  
</ul>  

</ul> 
</body>
<script type="text/javascript">
    window.onload = function () {
     
        var objects = document.getElementsByClassName("has_son");
        for (var i = 0; i < objects.length; i++) {
            var element = objects[i];
//遍历对象,绑定点击事件方法
            element.onclick = function () {
     
                var temp = this.className;
//替换out、in对象
                if (temp.indexOf("out") != -1) {
                    this.className = temp.replace(/out/, "in");
                } else if (temp.indexOf("in") != -1) {
                    this.className = temp.replace(/in/, "out");
                } else {
                    this.className = "out";
                }
            }
        }
    }
</script>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yuan487639/article/details/76084861

智能推荐

vuex状态持久化_沉迷...的博客-程序员秘密

vuex状态持久化安装vuex的插件npm i vuex-persistedstate在store的index.js中进行配置import { createStore } from 'vuex'// 全局模块import global from './modules/global'// 局部模块import cart from './modules/cart'import createPersistedstate from 'vuex-persistedstate'export de

华为政企云副总裁 年薪_5年经历3家公司跳槽到华为,年薪从17万到75万,网友说一般..._weixin_39609620的博客-程序员秘密

网友说,有人5年内从网易跳槽到搜狐,经历腾讯最后跳槽到华为,年薪从170000元到年薪750000元,所在岗位也不是大数据或云计算等热门岗位,就是一般的程序员,业界叫“码农”,这在互联网行业还算正常。我的原同事老高,那才是真正的“跳槽达人”。跳槽达人老高在山东1家知名上市公司做部门经理,年薪300000元,2013年跳槽到广东1家上市公司的子公司做副总经理,年薪800000元,2015年跳槽到上海...

Python:内部函数里如何修改外部函数的局部变量_金小金~的博客-程序员秘密_python函数内部改变外部变量

# 定义一个外部函数outerdef outer(): print('我是外部函数') x = 2 # 定义一个内部函数inner def inner(): print('我是内部函数') # 在内部函数如何修改外部函数的局部变量 nonlocal x # 此时这里的x不再是新增的变量,而是外部的局部变量x y = x + 1 print(y) x = 10 # 不是修改外部的局

重庆2019java工资_8020元/月!2019重庆最新平均工资出炉!你被平均了吗?_乔治·华尔特的博客-程序员秘密

原标题:8020元/月!2019重庆最新平均工资出炉!你被平均了吗? 重庆是西部唯一的直辖市和长江上游地区的经济、金融、科创、航运和商贸物流的中心城市。近年来随着经济的快速增长,西部各城市越来越多的年轻人选择到重庆读书学习、工作和生活。周边城市的年轻人选择重庆,主要还是因为这里相对于北上广深竞争压力更小一点,机会比较多,房价不高,收入比自己所在的城市还是要高不少。但是和北上广深想比较还是有很长一段...

小白必看!!最详细的Java标识符命名规范_Key Y的博客-程序员秘密

标识符:Java对包、类、方法、参数和变量等Java元素命名时使用的字符序列称为标识符。简而言之就是给类,接口,抽象类,接口的实现类,常量,变量,方法等元素取名字。规则:必须准守1.由字母,数字,下划线_,美元符号$组成2.不能以数字开头3.Java对于大小写严格区分4.不能是Java中的关键字规范: Java元素项目名称,包,类,抽象类,接口,接口的实现类,变量,方法,常量...

正规式和正规集_weixin_30642267的博客-程序员秘密

一、对于给定的字母表∑(1)ε和∅是∑上的正规式,它们的正规集为{ε}和∅(2)任何a∈∑,a是∑上的正规式,它所表示的正规集为{a}(3)假定e1和e2都是∑上的正规式,则①(e1|e2)为正规式,它所表示的正规集为L(e1)∪L(e2)②(e1·e2)为正规式,它所表示的正规集为L(e1)L(e2)③(e1)*为正规式,它所表示的正规集为(L(e1))*二、若两...

随便推点

maven配置访问nexus私服,从nexus私服下载依赖_aitxiaogang的博客-程序员秘密

第一步,私服nexus一般会设置鉴权,所以先添加server节点 &lt;server&gt; &lt;id&gt;nexus&lt;/id&gt; &lt;username&gt;admin&lt;/username&gt; &lt;password&gt;pwd&lt;/password&gt; &lt;/server&gt;这里需要特别注意id节点的值,这个值和后面很多节点相关联的。第二

为什么重写equals后建议重写hashCode?_程序员小潘的博客-程序员秘密

最近在看《Java核心技术卷一》,复习一下Java基础,谈到equals和hashCode,这个知识点我记得大学的时候是学过的,但是我竟一时语塞,回答不上来。离开校门工作一年多,学习各种框架、技术,在通往大牛的道路上乐此不疲,回过头来,反而连最基础的东西都遗忘了,让人不禁唏嘘感慨。好记性不如烂笔头,遂整理笔记记录。首先要了解equals方法是做什么用的?equals方法用于判断两个对象是否相等...

ip数据包分片原理_老师好我是大白的博客-程序员秘密_ip数据报分片

一份数据从一个主机通过以太网发送到里一个主机时,是要经过很多层路由转发的。其中过程相对比较的复杂,在这里我们要讨论的是IP在路由中转发时是以怎样的形式转发的和目的主机在接受到这写数据报时又是怎样处理的。首先我们需要了解的是整个IP数据报的格式:IP的转发控制都是由IP数据报的头部决定的。在这里我们就不详细的讨论首部的所有字段,我们就讨论一下个分片有关的总长度字段。在IP数据报中,总长度是16位的字段,依次数据报的最大长度为2^16-1=65535字节,虽然尽可能长的数据报可以提升传输速率,但是由于以

表单实时校验插件——jquery.validateForm.js(v.2.0)_vuturn的博客-程序员秘密_validateform

插件名:jquery.validateForm.js依赖: jquery ,  jquery.validateForm.css参数:暂无参数(有一个默认的msg提示)说明:实现了input =text , select ,textArea 的实时必填校验实现了input = number 的必填 数字类型 参数范围的校验使用方法:1.引入jquery,jquer

Python面向对象—多态、鸭子类型_Python 学习者的博客-程序员秘密

编程原则java具有自己的编程原则和设计模式,不能多继承。python的编程原则:1.开放封闭原则:开放是对扩展是开放的,封闭是对修改是封闭的(已经写完的代码程序是不能修改的)。2.依赖倒置原则:高层模块不应该依赖低层模块,二者都应该依赖其抽象;抽象不应该应该依赖细节;细节应该依赖抽象。换言之,要针对接口编程,而不是针对实现编程from abc import ABCMeta,abstra...

Python 爬虫---(3)Urllib库使用介绍_zhangbijun1230的博客-程序员秘密

1.Urllib库使用详解Urllib是python内置的HTTP请求库包括以下模块urllib.request 请求模块urllib.error 异常处理模块urllib.parse url解析模块urllib.robotparser robots.txt解析模块urlopen关于urllib.request.urlopen参数的介绍:urllib.request.urlopen(url, da...

推荐文章

热门文章

相关标签