css下拉点击不动,jQuery+css实现点击下拉列表

jQuery+css实现点击下拉列表

实现效果：

HTML代码如下：

• //可以放图标

  列表一

  

  • 列表内容一
  • 列表内容二
  • 列表内容三
  • 列表内容四
  • 列表内容五
  • 列表内容六

• //可以放图标

  列表二

  

  • 列表内容一
  • 列表内容二
  • 列表内容三
  • 列表内容四
  • 列表内容五
  • 列表内容六

• //可以放图标

  列表三

  

  • 列表内容一
  • 列表内容二
  • 列表内容三
  • 列表内容四
  • 列表内容五
  • 列表内容六

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代码如下：

$('.dp-title').on('click', function (e) {

if ($(this).hasClass('open')) {

$(this).removeClass('open');

$(this).next().hide();

} else {

$(this).addClass('open');

$(this).next().show();

}

});

标签：jQuery,drop,列表,down,ul,点击,内容,li,css

来源： https://blog.csdn.net/spirit_ferry/article/details/118818064