刚写入jquery时下拉框未出现效果,不知哪里出现问题,

jike_2309470 CSS3 实现下拉选择框、单选... 最后由 极客学院_ASMITA 于2017年01月12日回复

  • 1 回答
  • 1.4k 浏览

代码如下:理应点击栏位后会展现下拉框的

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>下拉选择框</title>

<script type="text/javascript" scr="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style type="text/css">

    body,p,ul{

      margin: 0;padding: 0;

    }

    body{

    background-color: #0c9;

 color: #333;

    }

    .content{

    padding-top: 5%;

    }

.content .select{

width: 300px;

height: 40px;

margin: 0 auto;

font-family: "Microsoft Yahei";

font-size: 16px;

background-color: #fff;

position: relative;

}

.content .select:after{

content:'';

display: block;

width:10px;

height: 10px;

border-left: 1px #ccc solid;

border-bottom: 1px #ccc solid;

position: absolute;

top:11px;

right: 12px;

transform: rotate(-45deg);

}

.content .select p{

padding: 0 15px;

line-height: 40px;

cursor:pointer; /* 当光标移动至此处有手型 */

}

.content .select ul{

list-style-type: none;

background-color: #fff;

width: 100%;

overflow-y: auto;

position: absolute;

top: 40px;

left: 0;

max-height: 0;

}

.content .select ul li{

padding: 0 15px;

line-height: 40px;

cursor:pointer;

}

.content .select ul li:hover{

background-color: #e0e0e0;

}

.content .select ul li.selected{

background-color: #39f;

color: #fff;

}

.content .select.open ul{

max-height: 250px;

}

.content .select.open:after{

transform: rotate(-225deg);

top: 18px;

}

   </style>

<script type="text/javascript">

$(function(){

$('.select > p').on('click',function(){

$('.select').toggleClass('open');

   });

    });

   

</script>

</head>

<body>

 <div class="content">

  <div class="select " >

  <p>所有选项</p>

  <ul>

  <li data-value="所有选项" class="selected">所有选项</li>

  <li data-value="html">html</li>

  <li data-value="css">css</li>

  <li data-value="jQuery">jQuery</li>

  </ul>

  </div>

 </div>

</body>

</html>