jQuery手风琴/筛选选择器的引用 

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 13:11-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        .parentWrap {
            width: 200px;
            text-align: center;

        }

        .menuGroup {
            border: 1px solid #999;
            background-color: #e0ecff;
        }

        .groupTitle {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .menuGroup > div {
            height: 200px;
            background-color: #fff;
            display: none;
        }

    </style>
</head>
<body>
<ul class="parentWrap">
    <li class="menuGroup">
        <span class="groupTitle">标题1</span>
        <div>我是弹出来的div1</div>
    </li>

    <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
    </li>

    <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
    </li>

    <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
    </li>
</ul>

</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.
        // console.log($('.menuGroup'));
        $('.parentWrap > .menuGroup').click(function () {
            // this 是 当前被 点击的 li

            // $(this).children('div').show();
            // $(this).siblings('li').children('div').hide();

            // 调用完 show(), 有返回值
            $(this).children('div').show().parent().siblings('li').children('div').hide();
        });
    });
</script>

在这里插入图片描述

posted on 2022-08-01 13:39  beyondx  阅读(19)  评论(0)  编辑  收藏  举报

导航