jQuery+css实现点击下拉列表

最新推荐文章于 2022-05-08 16:14:06 发布

spirit_ferry

最新推荐文章于 2022-05-08 16:14:06 发布

阅读量547

点赞数

文章标签： css jquery

本文链接：https://blog.csdn.net/spirit_ferry/article/details/118818064

版权

jQuery+css实现点击下拉列表

实现效果：
在这里插入图片描述

HTML代码如下：

<section class="drop-down">
            <ul>
                <li>
                    <div class="dp-title open">
                        <img class="" src="" alt="">    //可以放图标
                        <div class="title">列表一</div>
                        <img class="iconfont" src="../imgs/close.png" alt="">
                    </div>
                    <ul class="list-text">
                        <li>列表内容一</li>
                        <li>列表内容二</li>
                        <li>列表内容三</li>
                        <li>列表内容四</li>
                        <li>列表内容五</li>
                        <li>列表内容六</li>
                    </ul>
                </li>
                <li>
                    <div class="dp-title clearfix">
                        <img class="" src="" alt="">   //可以放图标
                        <div class="title">列表二</div>
                        <img class="iconfont" src="../imgs/close.png" alt="">
                    </div>
                    <ul class="list-text">
                        <li>列表内容一</li>
                        <li>列表内容二</li>
                        <li>列表内容三</li>
                        <li>列表内容四</li>
                        <li>列表内容五</li>
                        <li>列表内容六</li>
                    </ul>
                </li>
                <li>
                    <div class="dp-title clearfix">
                        <img class="" src="" alt="">  //可以放图标
                        <div class="title">列表三</div>
                        <img class="iconfont" src="../imgs/close.png" alt="">
                    </div>
                    <ul class="list-text">
                        <li>列表内容一</li>
                        <li>列表内容二</li>
                        <li>列表内容三</li>
                        <li>列表内容四</li>
                        <li>列表内容五</li>
                        <li>列表内容六</li>
                    </ul>
                </li>
            </ul>
    </section>

CSS代码如下：

*{margin: 0;padding: 0;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden } 
ul, ol {list-style: none; }
 body {font: normal 14px/25px '微软雅黑'; } 
 
.drop-down{max-width: 350px;margin: 200px auto;overflow: hidden; text-align: center;}
.drop-down ul{list-style: none;}
.drop-down ul li{width: 350px;height: auto;line-height: 100px; background: rgba(232, 232, 232, 1);border-bottom: 1px solid #D8D8D8;}
.drop-down ul li .dp-title{width: 350px;height: auto;overflow: hidden;}
.drop-down ul li .dp-title .title{float: left;margin-left: 40%;}
.drop-down ul li .iconfont{float: right;margin-right: 20%;margin-top: 10%;}
.drop-down ul li .list-text{line-height: 80px;display: none;}
.drop-down ul li .open .iconfont{transform: rotateZ(90deg);}

JavaScript代码如下：

 <script>
        $('.dp-title').on('click', function (e) {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $(this).next().hide();
            } else {
                $(this).addClass('open');
                $(this).next().show();
            }
        });
    </script>