與切換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李菜單系統。我已經在頂級導航模板中添加了一個span標記，我想用它作爲切換開關。跨度可以更改爲任何內容，這正是我目前所擁有的內容。

我遇到的問題是，鑑於這是一個模板系統，我可以選擇放入跨度，但沒有選擇根據是否存在ul.subnav有條件地顯示它同樣的李。所以，我需要將顯示器的一些方法：塊，實際上滿足此條件的操作，然後我就顯示：沒有其他的跨度默認。

我嘗試使用這個解決方案，它的工作到一個點，但它不具有多重下拉菜單中工作，似乎只，如果你在你的菜單結構有一個下拉的單個實例工作。

jQuery Toggle Dropdown Menu 和 ​​

的Javascript

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

我想這是你想要的。我可能是錯的。

$('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

隱藏與CSS的跨度和去：$('.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); 
});