html树形菜单如何做出点击其他菜单栏,当前菜单栏就自动关闭的效果?急急急!!
一般我们做的树形菜单可以同时展开多个菜单栏,如何做到打开其他菜单栏时,当前菜单栏就自动关闭呢? 展开
<div id="menu">
<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>
样式自已去写一下就好了
菜单栏点不开