jquery的菜单栏

下面就让我们使用jQuery的一个菜单栏插件，来创建一个简单的菜单栏示例

// HTML代码
<div class="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li>
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单4</a></li>
</ul>
</div>
// JS代码
$(function() {
$('.menu ul li:has(ul)').addClass('has-sub');
$('.menu ul li a').click(function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('.menu ul li ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
});

其中，如果某一菜单项还有子菜单，我们会在其外部包裹一个`ul`元素，这样可以创建出下拉式的菜单栏。