b站 4天从零玩转jQuery【黑马程序员】部分案例代码_手风琴

最新推荐文章于 2023-07-26 23:57:53 发布

加强亚索

最新推荐文章于 2023-07-26 23:57:53 发布

阅读量200

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_45801837/article/details/106337416

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .menu{
            border:1px solid #999999;
            background: #c6feff;
        }
        .title{
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #cccccc;
        }
        .ul1{
            width: 200px;
            text-align: center;
        }
        ul{
            list-style: none;
        }
        li{
            display: list-item;
        }
        div{
            height: 200px;
            background: white;
            display: none;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $(".ul1>.menu").click(function () {      //链式编程
                $(this).children("div").show().parent().siblings("li").children("div").hide();
            })
        })
    </script>
</head>
<body>
<ul class="ul1">
    <li class="menu">
        <span class="title">标题1</span>
        <div style="display: none;">这是div1</div>
    </li>
    <li class="menu">
        <span class="title">标题2</span>
        <div style="display: none;">这是div2</div>
    </li>
    <li class="menu">
        <span class="title">标题3</span>
        <div style="display: none;">这是div3</div>
    </li>
    <li class="menu">
        <span class="title">标题4</span>
        <div style="display: none;">这是div4</div>
    </li>
</ul>
</body>
</html>