jQuery 토글 화살표가있는 토글 드롭 다운 메뉴

Question

화살표 토글로 활성화 할 수있는 드롭 다운이있는 수직 메뉴를 만들고 동시에 최상위 레벨 링크를 활성 및 클릭 가능으로 유지하려고합니다. 나는 사용자 정의 CMS를 사용하고 있으므로이 작업을 수행 할 수있는 한 몇 가지 제약 사항이 있습니다.

HTML

<ul class="topnav"> 
    <li class="tn_first"> 
     <span></span><a class="topmenu" href="/default.asp">Home</a> 
    </li> 
    <li class="tn_mid"> 
     <span></span><a class="topmenu" href="/listings.asp">My Listings</a> 
     <ul class="subnav"> 
      <li class="sn_first"> 
       <a class="submenu" href="#">Listing 1</a> 
      </li> 
      <li class="sn_mid"> 
       <a class="submenu" href="#">Listing 2</a> 
      </li> 
      <li class="sn_last"> 
       <a class="submenu" href="#">Listing 3</a> 
      </li> 
     </ul> 
    </li> 
    <li class="tn_last"> 
     <span></span><a class="topmenu" href="/links.asp">System Pages</a> 
     <ul class="subnav"> 
      <li class="sn_first"> 
       <a class="submenu" href="#">Page 1</a> 
      </li> 
      <li class="sn_mid"> 
       <a class="submenu" href="#">Page 2</a> 
      </li> 
      <li class="sn_last"> 
       <a class="submenu" href="#">Page 3</a> 
      </li> 
     </ul> 
    </li>    
</ul> 

그래서 나는 매우 간단 UL LI 메뉴 시스템을 가지고있다. 최상위 레벨의 템플릿에 span 태그를 추가했습니다.이 태그는 토글 스위치로 사용하고 싶습니다. 기간은 무엇이든 변경할 수 있습니다. 현재 내가 현재 보유하고있는 것입니다.

내가 겪었던 문제는 템플릿 시스템이라는 점을 감안할 때 스팬을 넣을 수있는 옵션이 있지만 조건에 따라 ul.subnav가 있는지 여부를 기준으로 옵션을 표시 할 수있는 옵션이 없습니다. 같은 리. 따라서 디스플레이를 적용하는 방법이 필요합니다. 실제로이 조건을 충족하는 블록에 차단을 적용한 다음 표시합니다. 기본적으로 다른 범위는 표시되지 않습니다.

이 솔루션을 사용해 보았지만 포인트가 작동했지만 다중 드롭 다운이 작동하지 않습니다. 메뉴 구조에 단일 인스턴스가있는 경우에만 작동하는 것 같습니다.

jQuery Toggle Dropdown Menu 및 http://jsfiddle.net/hXNnD/1/

자바 스크립트

jQuery(document).ready(function() { 

var subMenu = jQuery("li ul li"); 
var linkClick = jQuery("ul li").filter(":has(ul)"); 

subMenu.hide(); 

linkClick.click(function (e) { 
    e.preventDefault(); 
    subMenu.slideToggle("fast"); 
}); 
}); 

나는 코드가 아래로 떨어지고있다 위치를 볼 수 있도록 2 서브 적 UL을 가지고 또 다른 예를 만들었습니다.

http://jsfiddle.net/BxsEX/

Answer 1

나는 이것이 당신이 원하는 모든 생각합니다. 나는 틀릴지도 모른다. CSS 당신의 스팬과

$('li').each(function(){ 
    //if we can find a UL with the class of subnav within our LI 
    if($(this).find('ul.subnav').length){ 
     //find the span within this LI and give it a display block 
     $(this).find('span').css('display', 'block') 
    }else{ 
     //otherwise, hide the span. 
     $(this).find('span').css('display', 'none') 
    } 
}); 

Answer 2

숨기기 및 이동에 대한 : $('.topnav li:has(ul) span').show();

http://jsbin.com/ujoqek/1/edit

CSS :

.topnav li span{ display:none; } 

JQ :

var arrow = ['▼','▲']; 

$('.topnav li:has(ul) span').show().html(arrow[0]).data('a',0); 
$('.topnav li > ul').hide(); 

$('.topnav span').click(function(){ 
    $(this).closest('li').find('ul').slideToggle(); 
    var arrw = $(this).data('a'); 
    $(this).html(arrow[++arrw%2]).data('a', arrw); 
});