0

목록의 각 항목에 아이콘을 표시하려고합니다. 그러나 아이콘이 목록의 첫 번째 항목에 표시되지 않습니다. 목록의 항목 right 옆에 아이콘이 필요합니다. 둘째아이콘이 각도 j를 사용하여 목록에 표시되지 않는 이유는 무엇입니까?

나는 드롭 다운 목록 .IT 이벤트를 여기

을 '아이콘을'캡처 클릭하는 방법 li의 클릭 이벤트를 캡처 표시되지 icon 클릭 내 코드 http://codepen.io/naveennsit/pen/mEmyGG

<div ng-app='app'> 
    <div ng-controller='cntr'> 
     <ul class="view-list"> 
      <li ng-repeat="d in data" ng-click="selectView(d, $event)"> 
       <a href="#">{{d.name}}</a> 
       <div class="dropdown"> 
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
    <span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         <li><a href="#">HTML</a></li> 
         <li><a href="#">CSS</a></li> 
         <li><a href="#">JavaScript</a></li> 
        </ul> 
       </div> 
      </li> 
     </ul> 
     <div> 
     </div> 
+1

질문이 이해가 가지 않습니다. 코드에 아이콘이 없습니다. 또한, 당신의 scss에'caret' 클래스가 없다면'caret'가 어떻게 나타날 것이라고 기대할 수 있습니까? –

+0

부츠랩 아이콘을 사용하고 있습니다. 코드 펜을 보시기 바랍니다. – user944513

답변

0
입니다

이 코드로 scss를 업데이트하려고합니다.

.view-list { 
    margin: 0; 
    padding: 0; 
    a { 
    display: inline-block; 
    padding: 10px 25px; 
    width: 100px; 
    } 
    li { 
    cursor: pointer; 
    position: relative; 
    height: 40px; 
    border-bottom: 1px solid grey; 
    >div { 
     display: inline-block; 
    } 
    } 
    .selected { 
    background-color: blue; 
    a { 
     color: #ffffff; 
    } 
    } 
} 

.view-list에 너비 : 100 %를 넣었고 인 div의 표시를 지정하고 '인라인 블록'

이 될 문제를 지정해야합니다. 스크립트 부분에서 jquery (부트 스트랩에서 필요함) 및 부트 스트랩을 정의하는 것을 잊지 마십시오.

<div ng-app='app'> 
    <div ng-controller='cntr'> 
    <ul class="view-list"> 
     <li ng-repeat="d in data" ng-click="selectView(d, $event)"> 
     <div class="dropdown"> 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
      {{d.name}} 
      <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
      <li><a href="#">HTML</a></li> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">JavaScript</a></li> 
      </ul> 
     </div> 
     </li> 
    </ul> 
    <div> 
</div> 

드롭 다운 자바 스크립트를 사용 : 당신의 HTML이

enter image description here

0

업데이트. 귀하의 페이지에 jQueryBootstrap JavaScript 파일을 추가해야합니다.

업데이트 된 데모보기 : Here

관련 문제