jQuery toggle dropdown menu with toggle arrow

Question

I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.

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>

So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.

The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.

I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.

jQuery Toggle Dropdown Menu and 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");
});
});

I created another example that has 2 sub ULs so you can see where the code is falling down.

http://jsfiddle.net/BxsEX/

Answer 1

Hide with CSS your spans and go for: $('.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

I think this is all you wanted. I may be wrong.

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