html樹形菜單如何做出點擊其他菜單欄，當前菜單欄就自動關閉的效果？急急急！！

<div?class="smtitle">

<a?href=""?class="smtitle_a">列表1</a>

<ul>

<li><a?href="">列表1</a></li>

<li><a?href="">列表1</a></li>

<li><a?href="">列表1</a></li>

<li><a?href="">列表1</a></li>

<li><a?href="">列表1</a></li>

</ul>

</div>

<div?class="smtitle">

<a?href=""?class="smtitle_a">列表2</a>

<ul>

<li><a?href="">列表2</a></li>

<li><a?href="">列表2</a></li>

<li><a?href="">列表2</a></li>

<li><a?href="">列表2</a></li>

</ul>

</div>

<div?class="smtitle">

<a?href=""?class="smtitle_a">列表3</a>

<ul>

<li><a?href="">列表3</a></li>

<li><a?href="">列表3</a></li>

<li><a?href="">列表3</a></li>

<li><a?href="">列表3</a></li>

</ul>

</div>

</div>

<style>

#menu .smtitle ul

{

list-style: none;

display: none;

}

</style>

<script src="../js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

function initMenu() {

// $('#menu ul').hide();

// $('#menu ul.smbody').show();

$('#menu div a').click(

function () {

$(this).parent().parent().find("a.smtitle_a").css("background", "url(../images/i_sm_collapsed.gif) no-repeat 10px center");

var checkElement = $(this).next();

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {

$('#menu ul:visible').slideDown('normal');

checkElement.slideUp('normal');

checkElement.prev().css("background", "url(../images/i_sm_collapsed.gif) no-repeat 10px center");

return false;

}

if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

$('#menu ul:visible').slideUp('normal');

checkElement.slideDown('normal');

checkElement.prev().css("background", "url(../images/i_sm_expanded.gif) no-repeat 10px center");

return false;

}

}

);

}

$(document).ready(function () { initMenu(); });

</script>

樣式自已去寫壹下就好了