好友面板

最新推荐文章于 2023-12-25 02:00:00 发布

广东话的蛇皇

最新推荐文章于 2023-12-25 02:00:00 发布

阅读量95

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104336595

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

好友面板

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">

        #u1 li {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        #u1 li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        #u1 li ul li {
            background-color: pink;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
      //页面加载后,隐藏所有的li
      $(function () {
        $("#u1>li>ul").hide();
        //找到id为u1下面的直接的子元素li添加点击事件
        $("#u1>li").click(function () {
          //当前点击的li里面的ul显示
          $(this).children("ul").show(500);
          //隐藏当前被点击的li的兄弟元素的li中的ul
          $(this).siblings("li").find("ul").hide(500);
        });
      });
    </script>
</head>
<body>
<div style=" width:200px; height:500px; border:1px solid red;">
    <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
        <li>
            幼儿园同学
            <ul>
                <li>鼻涕虫</li>
                <li>爱哭鬼</li>
                <li>张大胆</li>
                <li>班主任</li>
            </ul>
        </li>
        <li>小学同学
            <ul>
                <li>张三丰</li>
                <li>张无忌</li>
                <li>乔布斯</li>
                <li>助教</li>
            </ul>
        </li>
        <li>
            初中同学
            <ul>
                <li>盖茨</li>
                <li>川普</li>
                <li>奥巴马</li>
                <li>凤姐</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

广东话的蛇皇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
好友面板

好友面板<!DOCTYPE html><html><head lang="en"> <title></title> <meta charset="UTF-8"> <style type="text/css"> #u1 li { margin-...
复制链接

扫一扫

专栏目录