JS-下拉筛选的实现
下面为下拉筛选的效果图：
代码如下：
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/menudown.css" /> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/menudown.js" ></script> </head> <body> <dl class="topmenu"> <dt> <div class="selectlist"> <div class="select_textdiv"> <input type="hidden" value=""/> <p class="s_text">附近</p><span class="down"><img src="img/down.png"></span> </div> <div class="select_textul"> <ul class="select_first_ul"> <li class="focus"> <p>附近</p> <ul class="select_second_ul" style="display: block;"> <li>附近(智能范围)</li> <li>500</li> <li>1000</li> <li>1500</li> <li>2000</li> </ul> </li> <li> <p>热门商城</p> <ul class="select_second_ul"> <li>全部商城</li> <li>市中心区</li> <li>华侨城</li> <li>海岸城</li> <li>蛇口</li> </ul> </li> <li> <p>福田区</p> <ul class="select_second_ul"> <li>全部南山区</li> <li>华侨城</li> <li>蛇口</li> <li>南头</li> <li>南头中心区</li> <li>南油</li> </ul> </li> <li> <p>光明新区</p> <ul class="select_second_ul"> <li>全部南山区</li> <li>华侨城</li> <li>蛇口</li> <li>南头</li> <li>南头中心区</li> <li>南油</li> </ul> </li> <li> <p>龙岗区</p> <ul class="select_second_ul"> <li>全部南山区</li> <li>华侨城</li> <li>蛇口</li> <li>南头</li> <li>南头中心区</li> <li>南油</li> </ul> </li> <li> <p>福田区</p> <ul class="select_second_ul"> <li>全部南山区</li> <li>华侨城</li> <li>蛇口</li> <li>南头</li> <li>南头中心区</li> <li>南油</li> </ul> </li> <li> <p>宝安区</p> <ul class="select_second_ul"> <li>全部南山区</li> <li>华侨城</li> <li>蛇口</li> <li>南头</li> <li>南头中心区</li> <li>南油</li> </ul> </li><li> <p>罗湖区</p> <ul class="select_second_ul"> <li>全部南山区</li> <li>华侨城</li> <li>蛇口</li> <li>南头</li> <li>南头中心区</li> <li>南油</li> </ul> </li> </ul> </div> </div> </dt> <dt> <div class="selectlist"> <div class="select_textdiv"> <input type="hidden" value=""/> <p class="s_text">智能排序</p><span class="down"><img src="img/down.png"></span> </div> <div class="select_textul"> <ul class="select_first_ul"> <li class="focus"> <p>智能排序</p> <ul class="select_second_ul" style="display: block;"> <li>离我最近</li> <li>人气最高</li> <li>评价最好</li> <li>口味最佳</li> <li>环境最佳</li> </ul> </li> <li> <p>热门商城</p> <ul class="select_second_ul"> <li>全部商城</li> <li>市中心区</li> <li>华侨城</li> <li>海岸城</li> <li>蛇口</li> </ul> </li> </ul> </div> </div> </dt> <dt> <div class="selectlist"> <div class="select_textdiv"> <input type="hidden" value=""/> <p class="s_text">美食</p><span class="down"><img src="img/down.png"></span> </div> <div class="select_textul"> <ul class="select_first_ul"> <li> <p>西餐</p> </li> <li> <p>中餐</p> </li> </ul> </div> </div> </dt> </dl> </body> </html>
menu.css
@CHARSET "UTF-8"; /*默认样式*/ html { font-size: 4vw; height:100vh; } * { margin: 0; padding: 0; outline: none; } *:not(input, textarea) { -webkit- -callout: inherit; -webkit-user-select: auto; } body { font-family: "Arial", "微软雅黑", "宋体"; font-size: 1rem; color: #333; -webkit- -callout: inherit; -webkit-user-select: auto; margin: auto; height:100vh; } a { color: #54d09e; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a:hover { text-decoration: none; } button, input, select, textarea { font-size: 100%; margin: 0; padding: 0; outline: none; } textarea, input { resize: none; outline: none; } textarea { resize: none; -webkit-appearance: none; } ul, ol, li { list-style: none; } em { font-style: normal; } input[type=button] { -webkit-appearance: none; outline: none } h1,h2,h3,h4,h5,h6{ font-weight:normal;} b{ font-weight:normal;} .clear{ clear:both;font-size: 0;line-height: 0;height: 0;} /**下拉**/ .topmenu{ width:100%; } .topmenu dt{ width:33.3%; float:left; } .selectlist{ width:100%; height:auto; box-sizing: border-box; } .select_textdiv{ height:3rem; width:100%; line-height: 3rem; text-align: center; border-bottom: 2px solid #b3b3b3; position:relative; border-left:2px solid -webkit-linear-gradient(red, blue); } .select_textul{ width:100%; line-height: 3rem; box-sizing: border-box; display: none; width: 980px; max-height: 20rem; overflow-y: scroll; } .select_first_ul{ width: 100%; /*background: #eaeaea;*/ position: absolute; box-sizing: border-box; left: 0; } .select_first_ul>li{ padding: 0 0.5rem; box-sizing: border-box; } .select_first_ul>li>p{ width: 50%; padding: 0 1rem; box-sizing: border-box; border-bottom:1px #b1b1b1 solid; } .focus>p{ border-bottom:1px #FF9800 solid !important; color:#FF9800; } .select_second_ul{ width: 50%; position: absolute; right: 0px; top: 0; background: #fff; display: none; box-sizing: border-box; padding-left: 0.5rem; /*z-index: 1;*/ } .down{ position: absolute; top: 0; right: 0.5rem; display: inline-block; width:1rem; height:100%; } .down img{ width:1rem; margin-top: 1rem; } .divfocus::after{ position: absolute; bottom:0; left:46%; border-bottom:0.5rem solid #FF9800; border-left:0.5rem solid transparent; border-right:0.5rem solid transparent; content: ""; } .focusli{ background: #ffc107; color: #FFFFFF; } .select_second_ul>li{ padding: 0 0.5rem; box-sizing: border-box; border-bottom: 1px solid #eaeaea; }
menudown.js
$(function(){ var v_width= $(document.body).width(); $(".select_textul").width(v_width); $(".select_textdiv").click(function(){ $(this).parent().parent().siblings().find(".select_textul").hide(); $(".select_textdiv").removeClass("divfocus"); $(this).addClass("divfocus"); $(this).siblings(".select_textul").fadeToggle(500); var lilength = $(this).siblings(".select_textul").find("li.focus").has(".select_second_ul").length; if(lilength > 0){ $(this).siblings(".select_textul").find("li.focus>.select_second_ul").show(); }else{ $(".select_first_ul>li>p").css("width","100%"); } }) $(".select_first_ul>li>p").click(function(){ $(".select_second_ul").hide(); $(this).parent("li").addClass("focus").siblings("li").removeClass("focus"); var ynul = $(this).parent("li").has(".select_second_ul").length; if(ynul == 0){ var choose = $(this).text(); $(this).parents(".select_textul").siblings(".select_textdiv").find(".s_text").text(choose); $(this).parents(".select_textul").siblings("input").val(choose); $(this).parents(".select_textul").fadeOut(300); }else{ $(".select_second_ul").hide(); $(this).siblings(".select_second_ul").show(); event.stopPropagation(); chooseclick(); } }); chooseclick(); function chooseclick(){ $(".select_second_ul>li").click(function(){ var choose = $(this).text(); $(this).addClass("focusli").siblings("li").removeClass("focusli"); $(this).parents(".select_textul").siblings(".select_textdiv").find(".s_text").text(choose); $(this).parents(".select_textul").siblings("input").val(choose); $(this).parents(".select_textul").fadeOut(300); event.stopPropagation(); }); } })
