利用jQuery制作简易手风琴

最新推荐文章于 2022-11-06 16:08:12 发布

小苏(º﹃º )

最新推荐文章于 2022-11-06 16:08:12 发布

阅读量739

点赞数

分类专栏： jQuery 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_45850095/article/details/116960096

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用jQuery制作简易手风琴

实现步骤

我们先来看看效果：
在这里插入图片描述

实现步骤

1.引入jQuery文件

<script src="../jquery/jquery-1.12.4.js"></script>

2.将写好的标签进行样式修改

css样式：

<style>
        *{
            margin: 0 ;
            padding: 0px;
            list-style: none;
            /* 设置缓冲，当样式发生变化时，变化间隔为1s，
            让样式变化看起来更加的顺滑 */
            transition: all 1s;
        }
        .box{
            width: 300px;
            margin: 0 auto;
        }
        .box ul{
            width: 100%;
            height: 30px;
            background-color: #E0ECFF;
            overflow: hidden;
        }
        .box ul li{
            width: 100%;
            height: 30px;
            font-size: 25px;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;
            border: 2px solid goldenrod;
        }
    </style>

body中的标签

<body>
    <div class="box">
        <ul>
            <li>内容1</li>
            <li>我这里面可以放置图片</li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li>内容2</li>
            <li>我这里面可以放置图片</li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li>内容3</li>
            <li>我这里面可以放置图片</li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li>内容4</li>
            <li>我这里面可以放置图片</li>
        </ul>
    </div>
</body>

效果如下：
在这里插入图片描述

3.逻辑代码的书写

<script>
    //给每个ul下的第二个li设置高度与背景颜色
    $(".box ul li:odd").css({height:"250px",backgroundColor:"#eaecf1"});

    //给每个ul绑定一个点击事件
    $(".box ul").on("click",function(){
        //当前ul高度为30px时，进行样式修改
        if($(this).css("height")=="30px"){
            //所有的ul高度都设置为30px
            $(".box ul").css({height:"30"})
            //当前ul高度设置为280px，加上前面css中的transition: all 1s;
            //让其变化更加的顺滑
            $(this).css({height:"280"})
        }else {
            //当前ul高度不为30px时，将当前ul高度还原为30px
            $(".box ul").css({height:"30"})
        }
    })
</script>

注意：判断时注意每个高度值的修改
效果如下：
在这里插入图片描述

小苏(º﹃º )

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
利用jQuery制作简易手风琴

利用jQuery制作简易手风琴实现步骤1.引入jQuery文件2.将写好的标签进行样式修改3.逻辑代码的书写我们先来看看效果：实现步骤1.引入jQuery文件<script src="../jquery/jquery-1.12.4.js"></script>2.将写好的标签进行样式修改css样式：<style> *{ margin: 0 ; padding: 0px;
复制链接

扫一扫