How not to click the sub <a> tags?

How can I click the first level of tag only but not the other tags embedded inside the first level?

For instance, this the html,

 <!-- tile-tag -->
<div class="tile-tag">

    <h3>tags</h3>
    <ul>
    <li>
        <span>&#43;</span><a href="#">pr</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">interfaith</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">green</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">Tole-rants</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">media-training</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">public speaking</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">ethics</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">clients</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

    <li>
        <span>&#43;</span><a href="#">people</a>
        <ul>
            <li><span>&#95;</span><a href="#">sub tag</a></li>     
            <li><span>&#95;</span><a href="#">sub tag</a></li>
        </ul>
    </li>

</div>
<!-- tile-tag -->

the jquery,

$('.tile-tag a').click(function(){
        //alert($(this).text());

        // Set the variable开发者_开发百科.
        var parent_object = $(this).parent();
        var siblings_parent = parent_object.siblings();

        // Clean all siblings' style.
        siblings_parent.removeClass('current-tag');
        $('span:first',siblings_parent).html('+');
        $('ul',siblings_parent).slideUp('fast');

        // Attach style to object's parent.
        parent_object.toggleClass('current-tag');
        $('ul',parent_object).slideToggle('fast');

        // Swap the object's parent's span html
        if(parent_object.hasClass('current-tag')) $('span:first',parent_object).html('–');
        else $('span:first',parent_object).html('+');

        return false;
    });

$('.tile-tag a') this will apply to all tags including the sub tags. but I don't this code apply to the sub tags.

How can I achieve this?

So you want the ones in the first ul?

$('.tile-tag > ul > li > a')

See the child selector API page and compare to the descendant selector.