사용자 지정 드롭 다운 목록에 화살표 배치

미리 정의 된 사용자 지정이라는 두 개의 목록 항목이있는 사용자 지정 드롭 다운 목록을 만들었습니다. 문제는 드롭 다운 목록의 화살표 위치가 고정되어 있다는 것입니다. 드롭 다운의 첫 번째 목록 항목이 선택되면보기에는 좋아 보이지만 두 번째 목록 항목을 선택하면 목록 항목과 화살표 사이에 너무 많은 간격이 표시됩니다. 내가 선택한 화살표 항목에 따라 화살표 위치를 조정하고 싶습니다. 여기 내 코드가있다.사용자 지정 드롭 다운 목록에 화살표 배치

<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에서 작업하지만 크롬에서 메모장을 통해 실행하면 + 화살표 대신 정의되지 않은 일부 기호가 표시됩니다. – user3842029

사용자 지정 드롭 다운 목록에 화살표 배치

답변

관련 문제