Can't limit “return false” to parent element only; want children to return true!

Question

This is my first time here so I hope I don't come off too stupid!

I have a very simple jQuery problem: I have a database-generated ul-based navigation and I want list items that contain other lists to toggle showing those contained lists. The (generated) lists look like this (Wordpress code; ignore the Japanese):

<div class="block first">
<ul class="counts">
    <li class="cat-item cat-item-43">
        <a href="http://localhost/crg/?cat=43" title="View all posts filed under その他制作物">その他制作物</a>
    </li>
    <li class="cat-item cat-item-3">
        <a href="http://localhost/crg/?cat=3" title="View all posts filed under クライアント">クライアント</a>
        <ul class='children'>
            <li class="cat-item cat-item-4">
                <a href="http://localhost/crg/?cat=4" title="View all posts filed under マイクロソフト">マイクロソフト</a>
            </li>
            <li class="cat-item cat-item-9">
                <a href="http://localhost/crg/?cat=9" title="View all posts filed under 夢">夢</a>
            </li>
            <li class="cat-item cat-item-8">
                <a href="http://localhost/crg/?cat=8" title="View all posts filed under 生">生</a>
            </li>
        </ul>
    </li>
</ul>

And here's the jQuery I wrote to: First, hide all ul.children's inside li.cat-item's; Second, apply a toggle function and a return false to ONLY those li.cat-item's that have ul.children, leaving the links inside at their default function.

<script type="text/javascript">
$(document).ready(function() {
    var children = $("li.cat-item:has(ul.children)>ul.children").hide();
    $("li.cat-item:has(ul.children)").click(function(){
        $(this).find('ul.children').toggle();
        return false;
    });
});

The problem is, the "return false" is getting applied to everything inside the container li's and nothing I do seems to exclude them from the selection. Anybody know what I'm doing wrong?

Thanks in advance

Answer 1

Did it.

<script type="text/javascript">
$(document).ready(function() {
    var children = $("li.cat-item:has(ul.children)>ul.children").hide();
    $("li.cat-item:has(ul.children) > a").click(function(){
        $(this).siblings('ul.children').toggle();
        return false;
    });
});

I had to target the "a" tag within the li, not the li itself.