18-5-二级下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: "Microsoft YaHei", serif;
        }

        body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }

        ol, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            border: none
        }

        #wrap{
            width: 200px;
            margin: 50px auto;
            border: 1px solid #999;
            user-select: none;
        }
        #wrap .title{
            width: 100%;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            text-indent: 5px;
            background: pink;
            color: #fff;
            cursor: pointer;
            border-bottom: 1px dashed #eee;
        }
        #wrap .list{
            display: none;
        }
        #wrap .list.show{
            display: block;
        }
        #wrap .list li{
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            border-bottom: 1px dashed #eee;
            text-indent: 20px;
            cursor: pointer;
        }
        #wrap .list li:hover{
            background-color: #eee;
        }
    </style>
</head>
<body>

<div id="wrap">
    <div class="friend">
        <p class="title">同事</p>
        <ul class="list">
            <li>qq</li>
            <li>ww</li>
            <li>ee</li>
            <li>rr</li>
        </ul>
    </div>
    <div class="friend">
        <p class="title">好友</p>
        <ul class="list">
            <li>tt</li>
            <li>yy</li>
            <li>uu</li>
        </ul>
    </div>
    <div class="friend">
        <p class="title">同学</p>
        <ul class="list">
            <li>ii</li>
            <li>oo</li>
            <li>pp</li>
            <li>aa</li>
            <li>ss</li>
        </ul>
    </div>
</div>
<script>
    let aDiv = document.querySelectorAll("#wrap .title"),
        aList = document.querySelectorAll("#wrap .list");
    let len = aDiv.length;
    let a=0;

    for (let i=0;i<len;i++){
        aDiv[i].onclick = function () {
            // 点击标题div之后,遍历所有的list和标题对应的展开其他的隐藏
            // 用记录值的方法最好
            // for (let j=0;j<len;j++) {
            //     if (i===j){
            //         aList[j].classList.add("show");
            //     } else{
            //         aList[j].classList.remove("show");
            //     }
            // }

            // 三目改写的遍历方法
            for (let j=0;j<len;j++) {
                i===j?aList[j].classList.add("show"):aList[j].classList.remove("show");
                let arrt = i===j?"add":"remove";
                aList[j].classList[arrt]("show");
            }

            // 记录值的方法
            // aList[a].classList.remove("show");
            // a = i;
            // aList[i].classList.add("show");

        }
    }
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/zhangyu666/p/11479983.html

时间: 2024-10-12 19:41:47

18-5-二级下拉菜单的相关文章

如何实现导航菜单栏中的二级下拉菜单?

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <meta charset="UTF-8"> <title>Documen

纯CSS3实现宽屏二级下拉菜单

今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Javascript,展示速度当然是非常快的. 在线预览   源码下载

CSS3实现的横向二级下拉菜单代码实例

CSS3实现的横向二级下拉菜单代码实例:横向二级下拉菜单是非常常用的效果,例如很多网站的导航栏就是这样的二级下拉菜单效果,非常好用,本章节分享一段使用CSS3实现的下拉菜单,当然当下很多浏览器都不支持,不过相信用不了多久这种现状就会被改变.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

行内/块级垂直居中、图像文本替换以及二级下拉菜单的制作

经过近一个月对HTML与css的学习,利用HTML以及div+css对简单的静态网页进行简单的布局有了一定的基础,但是对于网页结构布局的分析.部分属性的使用存在着问题,希望在以后的学习能有所提高,这里就最近的学习情况进行一下总结与归纳: 一.行内元素与块级元素水平.垂直居中问题 (一)CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px}

CSS3蓝色宽屏二级下拉菜单DEMO演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport"

CSS+JS感应鼠标展开的的二级下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS+JS感应鼠标展开的的二级下拉菜单丨

jQuery和CSS3超酷二级下拉菜单插件

这是一款效果很酷又简单实用的jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是替代标准的二级下拉菜单的好方法,特别是在你想显示更多的二级子菜单的时候.另外,你可以十分容易的自定义二级下拉菜单的样式,多添加一个搜索框或登录注册表单等等. 在线演示:http://www.htmleaf.com/Demo/201502271428.html 下载地址:http://www.htmle

jQuery动态创建二级下拉菜单

创建网站的时候常常需要用到下拉菜单,每次都要自己写,总觉得太麻烦了,于是就写了一个动态生成下拉菜单的函数,并为其添加了相应的功能样式和视觉样式.在使用的时候,只需要定义好各级菜单的内容以及首级菜单的链接并调用dropMenu函数就可以使用了,如果需要,还可以自己添加一些富有特色的视觉样式. 1. 在HTML中添加如下代码: 1 <nav class="drop_menu"> 2 <ul></ul> 3 </nav> 并引入相应的css和j