javascript 可以创建一个 div 来充当下拉列表吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23374678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a div be created to act like a dropdown?
提问by Lani1234
I am using jquery to populate a dropdown menu from a text file and it is working fine. But visually, I would like it to look different.
我正在使用 jquery 从文本文件中填充下拉菜单，并且工作正常。但在视觉上，我希望它看起来不同。
My dropdown is in a div. What I would like to do is make the div itself clickable so that when you click it, the dropdown menu options pop up. And when an option is selected, the div's label is set to the text of the selected option.
我的下拉列表在一个 div 中。我想要做的是使 div 本身可点击，这样当您点击它时，下拉菜单选项会弹出。当一个选项被选中时，div 的标签被设置为所选选项的文本。
Is there someway to make the dropdown menu hidden but still functional?
有没有办法让下拉菜单隐藏但仍然有效？
回答by Cosmos
If I understand correctly, you want this. Click here for a DEMO.
如果我理解正确，你想要这个。单击此处查看演示。
HTML
HTML
<div id="dd" class="wrapper-dropdown-2">Sign in with
<ul class="dropdown">
<li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
<li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
<li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
</ul>
</div>
CSS
CSS
*,*:after,*:before {
box-sizing: border-box;
}
.wrapper-dropdown-2 {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
/* Styles */
background: #fff;
border-left: 5px solid grey;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.wrapper-dropdown-2 .dropdown {
/* Size & position */
position: absolute;
top: 60%;
left: -45px;
right: 0px;
/* Styles */
background: white;
transition: all 0.3s ease-out;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-2 .dropdown li:nth-child(1) a {
border-left-color: #00ACED;
}
.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
border-left-color: #4183C4;
}
.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
border-left-color: #3B5998;
}
.wrapper-dropdown-2 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-2 .dropdown li:hover a {
color: grey;
background-color: darkgrey;
}
.wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}
JavaScript
JavaScript
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
$('.wrapper-dropdown-2').removeClass('active');
});
});
回答by Muhammad Umer
Here take a look: http://jsfiddle.net/4Zw32/
来看看：http: //jsfiddle.net/4Zw32/
Basically you can select which div is selected by searching for div with class selected and you could assign data attribute to get additional value.
基本上，您可以通过搜索选择了类的 div 来选择选择哪个 div，并且您可以分配数据属性以获得附加值。
Css
css
* { margin: 0; padding: 0; }
.sel {
color:white;
width: 250px;
min-height: 40px;
box-sizing: border-box;
background-color: #55E6FA;
overflow: hidden;
}
.txt { padding: 10px; }
.selected { background-color: #31A9B9; }
.hide { display: none; }
.sel .options div:hover { background-color: #31A9B9; }
.sel .options {
width: 250px;
background-color: #66f7FB;
}
.sel .options div {
transition: all 0.2s ease-out;
padding: 10px;
}
Jquery
查询
var sel = $('.sel'),
txt = $('.txt'),
options = $('.options');
sel.click(function (e) {
e.stopPropagation();
options.show();
});
$('body').click(function (e) {
options.hide();
});
options.children('div').click(function (e) {
e.stopPropagation();
txt.text($(this).text());
$(this).addClass('selected').siblings('div').removeClass('selected');
options.hide();
});
