Expandable List에 FontAwesome 사용

Question

지금 약간의 목록을 작성 중입니다. 글꼴 Awesome 오른쪽 당근을 사용하여 텍스트를 확장 할 수 있음을 나타냅니다. 나는 그 밑에 ul이없는 어떤 li 항목에도 글꼴을 넣을 수 있습니다. 하지만 항목 3에 추가하려고하면 아이콘이 표시되지 않습니다. 그러나 항목 1에 나타납니다. 아래에 코드가 표시됩니다. 항목 1에는 사용중인 FA가 표시되지만 항목 3에는 정확히 동일한 코드가 있지만 표시되지 않습니다.

<tr><td class="tcat"><strong>Categories</strong></td>{$inlinemodcol}</tr> 
<tr> 

<td class="trow1" colspan="2"> 
    <ul> 
     <li><i class="fa icon-caret-right"></i>Item 1</li> 
     <li>Item 2</li> 
     <li><i class="fa icon-caret-right"></i>Item 3 
      <ul> 
       <li>Item 3.1</li> 
       <li>Item 3.2</li> 
       <li>Item 3.3</li> 
      </ul> 
     </li> 
     <li>Item 4 
      <ul> 
       <li>Item 4.1</li> 
       <li>Item 4.2</li> 
      </ul> 
     </li> 
     <li>Item 5</li> 
    </ul> 

이 작은 메뉴는 메뉴를 확장하는 데 사용하는

자바 스크립트

는 :

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $('li') 
     .css('pointer','default') 
     .css('list-style-image','none'); 
    $('li:has(ul)') 
     .click(function(event){ 
      if (this == event.target) { 
       $(this).css('list-style-image', 
        (!$(this).children().is(':hidden')) ? 'url(plusbox.gif)' : 'url(minusbox.gif)'); 
       $(this).children().toggle('slow'); 
      } 
      return false; 
     }) 
     .css({cursor:'pointer', 'list-style-image':'url(plusbox.gif)'}) 
     .children().hide(); 
    $('li:not(:has(ul))').css({cursor:'default', 'list-style-image':'none'}); 
}); 

Answer 1

나는 그것 때문에 사용하는 자바 스크립트 코드의 생각합니다.

이 라인 :

$(this).children().toggle('slow');

및

.children().hide();

는 childrens li 즉 i 및 ul의 숨어있다. 그래서 모든 어린이를 숨기지 않고 의 어린이 ul 만 숨기려면 자바 스크립트를 변경하십시오.

업데이트 JS :

$(function() { 
    $('li') 
     .css('pointer', 'default') 
     .css('list-style-image', 'none'); 
    $('li:has(ul)') 
     .click(function (event) { 
     if (this == event.target) { 
      $(this).css('list-style-image', (!$(this).children().is(':hidden')) ? 'url(plusbox.gif)' : 'url(minusbox.gif)'); 
      $(this).children('ul').toggle('slow'); //Changed 
     } 
     return false; 
    }) 
     .css({ 
     cursor: 'pointer', 
      'list-style-image': 'url(plusbox.gif)' 
    }) 
     .children('ul').hide(); //Changed 
    $('li:not(:has(ul))').css({ 
     cursor: 'default', 
      'list-style-image': 'none' 
    }); 
}); 

데모 :http://jsfiddle.net/lotusgodkk/JfGVE/157/