js實現下拉框
阿新 • • 發佈:2021-12-24
<body>部分————————簡單的布個局
<body> <div id="box">請選擇手機名稱</div> <div id="down"> <ul class="phones"> <li>華為</li> <li>小米</li> <li>oppo</li> <li>vivo</li> <li>愛瘋</li> <li>三星</li> </ul> </div> </body>
<style>部分
<style> #box{ color: aliceblue; width: 110px; height: 25px; border: 1px solid #c5c5c5; border-radius: 10px; background-color: #797777; text-align: center; /* text-indent: 5px; */ font-size: 14px; line-height: 25px; cursor: pointer; } #down{ border: 1px solid #c5c5c5; width: 90px; margin-left: 5px; display: none; } ul{ padding: 0; margin: 0; } li{ list-style: none; font-size: 14px; border-bottom: 1px dashed #c5c5c5; text-align: center; height: 25px; line-height: 25px; color: aliceblue; background-color: #333; cursor: pointer; } li:hover{ background-color: #5c0e0e; } </style>
<script>部分————————實現功能的部分
<script> var obox = document.getElementById("box"); var odown = document.getElementById("down"); var oli = document.querySelectorAll("li"); console.log(oli); var timer; //當點選obox時,呈現出下拉列表的內容,給個延時效果 obox.onclick = function(){ clearInterval(timer); timer = setInterval(function(){ odown.style.display = "block"; },300) ///選中列表中的某一項並將其呈現在box中,隱藏下拉列表 for(var i=0;i<oli.length;i++){ oli[i].n = i; oli[i].onclick = function(){ obox.innerHTML = this.innerHTML; odown.style.display = "none"; clearInterval(timer); } } } </script>
帶有小三角的下拉框
<div class="wrap"> <ul> <li></li>.... </ul> <div class="triangle1"></div> <div class="triangle2"></div> </div>
/*三角*/
.wrap>ul{position: relative;left: 0px;} .wrap { position: relative;top: -2530px;left: -250px; background-color: rgb(15, 14, 14); border: 1px solid grey; width: 160px; height: 550px; z-index: 999; display: none; margin: 0 auto; } .triangle1 { display: block; position: absolute; width: 0px; height: 0px; border: 8px solid transparent; border-bottom-color: rgb(112, 106, 106); top: -17px; left: 20px; margin: 0 auto; } .triangle2 { display: block; position: absolute; width: 0px; height: 0px; border: 8px solid transparent; top: -16px; border-bottom-color: rgb(14, 13, 13); left: 20px; margin: 0 auto;}