Home >Web Front-end >HTML Tutorial >Is there any non-select drop-down selection? _html/css_WEB-ITnose
Is there any non-select drop-down selection? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:461155browse
有没有非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> 30b72f28e4aba8ea577105d2b0a098832cacc6d41bbb37262a98f745aa00fbf0
a98184d1df4450cd1389687477dc797b
55bb2291c4c27ea2d622dda46fa7e1ec
c3da94950e46daca331ec48b9a0c39ef
6072cf9f6bd7b20ca2e4e430b3e487ad5e9641421b99fea06d1c7d4f8cf6458e首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c67c8836a449cd9267a7dc10cc66ebd31f档案5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
669703836e8c1866c76e0de8a4340b23
4f1fc7dbd68787cd6b18e127e4b25844下拉菜单 12bdbd0acb84b74bc4f78c0ea70b0e740d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed
854df089c6ee54d934e694c7fb3c0b75
25edfb22a4f469ecb59f1190150159c6318dcb204dc59f85fc99a9e0aead0840电影5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c60f7d8583eb671bee22cce275edc63605美剧5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
7550f3798387443107eaab44a0b0ac20
b222d722b0433d6f5f954388d9dd590011111111116b28748ea4df4d9c2150843fecfba68
72416d92c4bd9a931d943f796621a14a22222222222216b28748ea4df4d9c2150843fecfba68
b37dea56dadc9947cf05c2f8b656ad143333333333316b28748ea4df4d9c2150843fecfba68
e09668752939d34020d859061f43d45544444444444416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
;script src="http://bootstrap.ninghao.net/assets/js/bootstrap-tab.js">2cacc6d41bbb37262a98f745aa00fbf0
This is the effect, but this code is too much. Simple JQ implementation, does any master have a favorite?
25edfb22a4f469ecb59f1190150159c6f79e117bf53a3b47ec48c341fb9ff493Movies5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
="#dropdown2" data-toggle="tab">American drama5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
The effect of these two items
The above effect is that there is too much JS Now, it would be nice if the three JS can be separated. The effect is the one I posted. Pull down to switch the TAB box behind
158857c6b1f7d46cecc8abf7f731153e
1c6ebbe2b1c97f83cea4235f9f120ea7
0fa3c8d711c15183c3d029904fdf31db 85f17fc6be333dbfc1f31e0aed5604ac
8c767d02915150d2378e18e65e398021
bbb84e3e75b36eb4260cf6b3db844ca1
This can only be used in browsers that support HTML5 In normal use!
Get a ul or div and make one yourself