jQuery写手风琴

最新推荐文章于 2024-06-20 15:06:48 发布

北凉悲凉

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量31

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_72221951/article/details/132027663

版权

jQuery写手风琴

使用jQuery实现手风琴效果

鼠标点击其中一个标题使该标题下的内容显示出来，其余的不显示

* {
        margin: 0;
        padding: 0;
    }
/*设置整体盒子的宽高*/
    .box {
        width: 500px;
        height: auto;
        margin: auto;
    }
/*去掉列表的圆点*/
    ul {
        list-style: none;
    }
/*设置li的样式*/
    .outerUl>li {
        text-align: center;
        background-color: royalblue;
        border-bottom: 1px solid gray;
    }
/**/
    .outerUl>li:last-child {
        border-bottom: none;
    }
/*在li中再加一个ul li*/
    .childUl>li {
        width: 100%;
        background-color: white;
        line-height: 40px;
    }
/**/
    .childUl {
        display: none;
    }
/**/
    h4 {
        padding: 8px 0;
    }

<body>
    <div class="box">
        <ul class="outerUl">
            <li>
                <h4>软件教学</h4>
                <ul class="childUl">
                    <li>java</li>
                    <li>web前端</li>
                    <li>安卓开发</li>
                    <li>iOS开发</li>
                </ul>
            </li>
            <li>
                <h4>游戏动漫</h4>
                <ul class="childUl">
                    <li>英雄联盟</li>
                    <li>王者荣耀</li>
                    <li>超级玛丽</li>
                    <li>双截龙</li>
                </ul>
            </li>
            <li>
                <h4>电商企业</h4>
                <ul class="childUl">
                    <li>淘宝</li>
                    <li>天猫</li>
                    <li>京东</li>
                    <li>苏宁易购</li>
                </ul>
            </li>
            <li>
                <h4>营销培训</h4>
                <ul class="childUl">
                    <li>seo</li>
                    <li>微信营销</li>
                    <li>网络创业</li>
                    <li>市场营销</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

$('.outerUl>li').mousemove(function () {
//将需要展开的元素与点击的元素的索引值对应
        $('.childUl').eq($(this).index()).slideDown(1000)
//让其他没有移入的元素收起
        $('.childUl').not($('.childUl').eq($(this).index())).slideUp(1000)
    })