【发布时间】：2014-07-17 23:47:49
【问题描述】：
我创建了一个自定义下拉列表，其中包含两个列表项，即预定义和自定义。问题是下拉列表中箭头的位置是固定的。 when the first list item in the drop down is selected it looks good but when the second list item is selected it shows too much gap between the list item and arrow.我希望根据所选列表项调整箭头位置。这是我的代码。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function DropDown(el) {
this.dd = el;
this.opts = this.dd.find('ul.dropdown > li');
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
obj.opts.on('click',function(){
var opt = $(this);
var orgVal = $("#ddtext").text();
obj.val = opt.text();
obj.index = opt.index();
$("#ddtext").text(obj.val);
opt.text(orgVal);
$(this).css('wrapper-dropdown-7');
});
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
//$('.wrapper-dropdown-5').removeClass('active');
});
});
</script>
<style>
.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 144px;
margin: 0 auto;
/* Styles */
background: #fff;
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-5:after { /* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
left: 150px;
margin-top: -18px;
border-width: 9px 9px 0 7px;
border-style: solid;
border-color: #067ab4 transparent;
}
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 30%;
left: -38;
right: 0;
/* Styles */
list-style: none;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}
.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #067ab4;
padding: 0px 0;
transition: all 0.3s ease-out;
}
/* Hover state */
.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}
.wrapper-dropdown-5.active .dropdown {
border-bottom: 0px solid rgba(0,0,0,0.2);
max-height: 400px;
}
div#dd
{
color: #067ab4;
font: 30px tahoma;
display: inline-block;
margin-top: 45px;
}
div#textA
{
display: inline-block;
font: 30px tahoma;
padding-left: 20px;
margin-top: 45px;
}
div#textB
{
display: inline-block;
font: 30px tahoma;
padding-left: 40px;
margin-top: 45px;
}
span#ddtext
{
border-bottom: 1px solid #067ab4;
padding-bottom: 5px;
padding-left: 0px;
}
</style>
</head>
<body> <div id="textA">I want to select a</div>
<div id="dd" class="wrapper-dropdown-5" tabindex="1"><span id="ddtext">Predefined</span>
<ul class="dropdown">
<li><a href="#">Custom</a></li>
</ul>
</div>
<div id="textB">profile</div>
</body>
<html>
【问题讨论】：
-
嗨，埃文。这是小提琴链接jsfiddle.net/R5aHa/1
标签： javascript jquery html css