帶有切換箭頭的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菜單系統。 我已經在導航欄的頂層添加了模板，我想將其用作切換開關。 范圍可以更改為任何值，這就是我目前在其中所擁有的。

我遇到的問題是，鑒於這是一個模板系統，我可以選擇輸入跨度，但是沒有選擇根據ul.subnav是否在同一li中有條件地顯示它。 因此，我需要一些將display：block應用於實際滿足此條件的方法，然后我將只顯示：默認情況下，其他范圍都沒有。

我嘗試使用此解決方案，但確實可以使用，但不適用於多個下拉菜單，只有在菜單結構中只有一個下拉菜單實例時，它才似乎有效。

jQuery Toggle下拉菜單和http://jsfiddle.net/hXNnD/1/

Java腳本

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隱藏您的跨度並進行以下操作： $('.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); 
});

Answer 2

我想這就是您想要的。 我可能是錯的。

$('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')
    }
});