Question

I have menu generated by a CMS with HTML output like:

<ul id="category-nav">
<li>
    <a href="google.com" title=""> Top-level with Sub-Menu </a>
        <ul>                    
            <li>
                <a href="google.com" title=""> Google 2 </a>
                </li>                                               
            <li>
            <li>
                <a href="google.com" title=""> Google 3 </a>
                </li>                                               
            <li>
            <li>
                <a href="google.com" title=""> Google 4 </a>
                </li>                                               
            <li>
        </ul>
</li>
<li>
    <a href="google.com" title=""> Top-level w/out submenu  </a>
</li></ul>

and I’m attempting to create an accordion style menu with jQuery using the following:

$('#category-nav > li > a').click(function(){

                    if ($(this).attr('class') != 'selected'){
                        $('#category-nav li ul').slideUp();
                        $(this).next().slideToggle();
                        $('#category-nav li a').removeClass('selected');
                        $(this).addClass('selected');
                    }

                });

This works fine, however, I’m trying replace the hyperlink reference in top-level categories with a sub-menu with ‘#’ while leaving top-level categories w/out submenu hyperlink references intact, using jQuery.

I’ve been trying different variations of:

$("#category-nav li > a > ul").parent().attr('href', '#')

to no success. Any help would be much appreciated!

Thank you!

Answer 1

$('#category-nav > li:has(ul) > a').attr('href', '#');

or possibly faster due to not using non-css syntax in the selector:

$('#category-nav > li').has('ul').children('a').attr('href', '#');