jquery实现手风琴效果

约定不等于承诺〃 2022-09-14 09:09 165阅读 0赞

**css:**

**html:**

<div class="cont">
            <dl>
                <dt style="background: purple;">第一幅图的展示效果</dt>
                <dd style="width: 295px;"><img src="./img/1.jpg" alt=""></dd>
            </dl>
            <dl>
                <dt style="background: orange;">第二幅图的展示效果</dt>
                <dd><img src="./img/2.jpg" alt=""></dd>
            </dl>
            <dl>
                <dt style="background: palegreen;">第三幅图的展示效果</dt>
                <dd><img src="./img/3.jpg" alt=""></dd>
            </dl>
            <dl>
                <dt style="background: darkcyan;">第四幅图的展示效果</dt>
                <dd><img src="./img/4.jpg" alt=""></dd>
            </dl>
        </div>

**javascript:**

//jquery官网：https://www.bootcdn.cn/jquery/  
    <script src="./js/jquery.js"></script>
        <script>
            /* 
               点击dt的时候 让dd宽度变成295  其他的dd的宽度变成0 
            */
            $('dt').click(function () {
                $('dd').animate({
                    width: 0
                }, {
                    duration: 500,
                    queue: false
                });
                $(this).next().animate({
                    width:295
                },500)
            });
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8feecd24f17442c7b2405078a71618d4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/a318bc33f34844ae93333b6f941baaf0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/32e816f38e3b472e9808d962db4ebab6.png