Heim >Web-Frontend >HTML-Tutorial >有没有非select 的下拉选择？_html/css_WEB-ITnose
有没有非select 的下拉选择？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:461155Durchsuche
有没有非select 的下拉选择？ 就等于是一个下拉式的滑动门。找了好多，无一例外都是select 的模拟器的等。
不需要模拟的那么麻烦，就是一个下拉，然后被选择的项目出现在第一，后面切换一个滑动。
哎，这玩意真不好描述。
回复讨论(解决方案)
实在不好描述，上个图吧。
有人有么？非常感谢啊！
这个一般都是js配合css完成的，你搜一下下拉菜单插件
怎么说呢。。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>statistics test</title> <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <style type="text/css"> .dropdiv{ width: 180px; height: 24px; overflow: hidden; float: left; font-size: 13px; font-family: "微软雅黑"; position: relative; padding: 0px 26px 0px 5px; border: solid 1px #cecece; background: url(../images/droparrow.png) 186px no-repeat; } .dropmiandiv{ margin-left: 40px; width: 213px; background: url(../images/dropdown.png) repeat-x; height: 27px; } .chooseItems{ border: solid 1px #cecece; } .chooseItems .chooseItem{ font-size: 13px; font-family: "微软雅黑"; padding: 5px; border-bottom: solid 1px #cecece; } .chooseItems .chooseItem:last-child{ border-bottom:none; } .chooseItems .chooseItem:hover{ background: #f2f2f2; } </style> </head> <body> <div class="dropmiandiv" quest ="select1"> <input type="text" readonly="readonly" id ="select1" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> </div> <div class="chooseItems" answer ="select1" style="display:none; position:absolute;"> <div class="chooseItem" displayMember="0" valueMember ="独立注册译员">独立注册译员</div> <div class="chooseItem" displayMember="1" valueMember ="供应商译员">供应商译员</div> <div class="chooseItem" displayMember="2" valueMember ="供应商">供应商</div> <div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> </div> <div class="dropmiandiv" quest ="select2" style="position:absolute;top:200px;"> <input type="text" readonly="readonly" id ="select2" displayMember="-1" valueMember ="请选择" class="dropdiv" value="请选择"/> </div> <div class="chooseItems" answer ="select2" style="display:none; position:absolute;"> <div class="chooseItem" displayMember="0" valueMember ="独立注册译员">独立注册译员</div> <div class="chooseItem" displayMember="1" valueMember ="供应商译员">供应商译员</div> <div class="chooseItem" displayMember="2" valueMember ="供应商">供应商</div> <div class="chooseItem" displayMember="3" valueMember ="代理商">代理商</div> </div> </body> </html> <script type="text/javascript"> $(".dropdiv").click(function(e){ $(".chooseItems").slideUp(300); e.stopPropagation(); var quest = $(this).parent(); var questwidth = parseInt(quest.width())-2; var questheight = quest.height(); var left = quest.position().left+parseInt(quest.css("margin-left"))+parseInt(quest.css("padding-left")); var top = parseInt(quest.position().top)+parseInt(questheight)+4; var attrs = quest.attr("quest"); var selectsd = $('.chooseItems[answer='+attrs+']'); var selectsdHeight = selectsd.height(); if((top+selectsdHeight)>$(window).height()){ top = top - selectsdHeight - questheight-7; } if($(selectsd).is(":visible")){ $(selectsd).slideUp(300); }else{ $(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).slideDown(300); } }); $(".chooseItem").click(function(e){ e.stopPropagation(); var divhtml = $(this); var displayMember,valueMember; displayMember = divhtml.attr("displayMember"); valueMember = divhtml.attr("valueMember"); var attrs =$(this).parent().attr("answer"); var parent = $("#"+attrs); var olddisplayMember,oldvalueMember; olddisplayMember = parent.attr("displayMember"); oldvalueMember = parent.attr("valueMember"); if(olddisplayMember !=displayMember){ parent.attr("displayMember",displayMember); parent.attr("valueMember",valueMember); parent.val(valueMember); parent.change(); } $(this).parent().slideUp(300); }); $(document).click(function(e){ var target = $(e.target); if(target.closest(".chooseItems").length == 0){ $(".chooseItems").slideUp(300); } }); </script> <script></script>
<script></script>
<script></script>
就是这种效果，但这个代码太多了。简单的JQ实现下，哪位大神有收藏么？
里面这两项的效果
上面的效果就是JS太多了，三个JS，能分离出来就好了。效果就是我发的那种，下拉切换后面的TAB框
用这个就可以实现了，里面有演示，最好的建议就是直接改演示代码，这样速度最快。
这只能在支持HTML5的浏览器中正常使用！
自己拿 ul 或者 div 搞一个
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：【设计前沿】初级网页设计师需要注意事项_html/css_WEB-ITnoseNächster Artikel：HTML-常用标签总结与实践_html/css_WEB-ITnose