我想在显示子菜单后点击它的链接显示子菜单,如何在下面完成我的代码
我的HTML
<ul id="menu">
<li>
<a href="http://stackoverflow.com/questions/ask">Menu 1 1</a>
<ul>
<li><a href="http://yahoo.com/">Menu 1 Sub</a></li>
</ul>
</li>
<li>
<a href="http://stackoverflow.com/">Menu 2</a>
<ul>
<li><a href="http://google.com/">Menu 2 Sub 1</a></li>
<li><a href="http://wiki.com/">Menu 2 Sub 2</a></li>
</ul>
</li>
</ul>
我的CSS
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width:220px;
}
ul#menu a { font:bold 12px Arial, Helvetica, sans-serif;
display: block;
text-decoration: none;
}
ul#menu li {
margin-top: 1px;
}
ul#menu li a {
background: #1c3f94;
color: #fff;
padding: 0.5em;
}
ul#menu li a:hover {
background: #000;
}
ul#menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
我的JS
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu 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:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
答案 0 :(得分:1)
第一个条件为真时不要返回false:
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function () {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return true;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}