Выбор ссылок верхнего уровня, за которыми не следует список подуровней в jQuery

Question

У меня есть меню, созданное CMS с выводом HTML, например:

<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>

, и я пытаюсь создать меню в стиле аккордеона с помощью jQuery, используя следующее:

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

                });

Это работает нормально, однако я пытаюсь заменить ссылку на гиперссылку в категориях верхнего уровня на подменю на «#», оставляя категории верхнего уровня без ссылок на подменю без изменений, используя jQuery.

Я пробовал разные варианты:

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

, но безуспешно.Любая помощь будет высоко ценится!

Спасибо!

Answer 1

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

или, возможно, быстрее из-за не использования синтаксиса не-css в селекторе:

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