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>