在自定義下拉列表中定位箭頭

我已經創建了具有兩個列表項的自定義下拉列表，即預定義和自定義。問題在於下拉列表中箭頭的位置是固定的。當選擇下拉列表中的第一個列表項時，它看起來很不錯，但是當選擇第二個列表項時，它會在列表項和箭頭之間顯示太多空白。我想要根據所選的列表項調整箭頭位置。這是我的代碼。在自定義下拉列表中定位箭頭

<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>

來源

2014-07-17 user3842029

做出小提琴PLZ？ – Evan

嗨埃文。這裏是小提琴鏈接http://jsfiddle.net/R5aHa/1/ – user3842029

你只需要做出一些改變你的CSS，這裏的小提琴：http://jsfiddle.net/Ls6pb/1/

這裏是我的編輯你的CSS：

.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; 
} 
span#ddtext:after{ 
    content:" ▾" 
} 
/* Little arrow .wrapper-dropdown-5:after { 
    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; 
}

來源

2014-07-17 15:47:49 ShemSeger

謝謝ShemSeger.Its工作很好。 – user3842029

很高興我可以幫助，如果它是你的正確答案，隨時點擊我的答案旁邊的小複選標記，並給它一個upvote :) – ShemSeger

嗨ShemSeger。它在jsfiddle中工作，但當我通過記事本++在chrome上運行它時，它顯示了一些未定義的符號來代替箭頭。 – user3842029

在自定義下拉列表中定位箭頭

回答

相關問題