带有切换箭头的 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 是否存在于同一系统中来有条件地显示它李。所以我需要某种方式将 display:block 应用于实际满足此条件的那些，然后我将 display:none 默认情况下其他跨度。

我尝试使用此解决方案，它在一定程度上确实有效，但它不适用于多个下拉菜单，它似乎只有在您的菜单结构中有一个下拉菜单实例时才有效。

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

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

用 CSS 隐藏你的 span 并选择：$('.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')
    }
});