Drop down menu 带有切换箭头的jQuery切换下拉菜单

我正在尝试做一个垂直菜单，下拉菜单可以通过箭头切换激活，同时仍然保持顶级链接的活动和可点击。我正在使用一个定制的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>

我创建了另一个示例，它有2个子ULs，因此您可以看到代码的下降位置

---

我想这就是你想要的。我可能错了

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

---

使用CSS隐藏您的跨度，并选择：

$（'.topnav li:has（ul）span'）.show（）


CSS:

jQ:

谢谢，这确实解决了我的跨度问题，尽管我仍然有来自另一个线程的其他切换代码的问题，该线程不使用多个子ULs。我发布了上面JSFIDLE中的代码，看看您是否有机会。几乎就是这样。缺少的只是在打开第二个UL时关闭第一个UL。
$('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')
    }
});

.topnav li span{ display:none; }

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); 
});