我是 javascript 的新手,我正在使用 Javascript 编写 Accordion 菜单。我成功了。但最后我的程序有一个错误。
假设大写字母是一级菜单,小写字母是二级菜单。
如果 A 有 child ,点击 A 时显示“a b c d”。
如果还没有显示页面链接到A。
这是我要申请的条件。
但是我在某处被阻止了。实际上,它就像
如果 A 有 child ,点击 A 时显示“a b c d”。如果没有,A 是不可点击的链接。
这是我的源代码。
MyJSFile.js
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
这是我的 CSS 类的 MyCSS.css
#nav {
padding-left:0px;
display: block;
width: 100%;
margin: 0 auto;
}
#nav li {
list-style-type: none;
}
#nav > li > a:hover, #nav > li > a.open {
color: #FFF;
background-color: #38454B;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.35, #212121),
color-stop(1, #866F4A));
background-image: -o-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: -moz-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: -webkit-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: -ms-linear-gradient(bottom, #212121 35%, #866F4A 100%);
background-image: linear-gradient(to bottom, #212121 35%, #866F4A 100%);
}
#nav li ul {
display: none;
background-color: #CCC;
list-style-type: none;
}
HTML 导航在这里
<nav>
<ul id="nav">
<li><a href="">Accueil</a></li>
<li><a href="Aller à la page 1">Podologie</a>
<ul>
<li><a href="Aller à la page 2.1">Présentation</a></li>
<li><a href="">*Pododiabétologie</a></li>
<li><a href="">*Podopédiatrie</a></li>
<li><a href="">*Podologie sportive</a></li>
<li><a href="Aller à la page 2.3">Les conseils du podologue</a></li>
</ul>
</li>
<li><a href="index.php?pays=FR&page=contact">Contacts</a>
<ul>
<li><a href="http:/www.google.com/search?q=web+design+icons">Lien1</a></li>
<li><a href="http:/www.google.com/search?q=web+design+tutorials">Lien2</a></li>
<li><a href="http:/www.google.com/search?q=web+design+user+interface">Lien3</a></li>
<li><a href="http:/www.google.com/search?q=web+design">Lien4</a></li>
</ul>
</li>
</ul>
</nav>
由第三方编辑:
JSFiddle 在这里:http://jsfiddle.net/3STdc/
我是一名优秀的程序员,十分优秀!