サイドバーにカーソルを合わせるとナビゲーションバーが表示されるjqueryを使用した効果に取り組んでいますが、ナビゲーション自体にはいくつかの効果プロパティがあるため、1つをクリックするとdd
3dt
つの子が表示され、残りは非表示になりますが、現在は表示のみです最初の dt と残りを非表示にします...そして、ここで close メソッドが機能しない理由はコードです。
<html>
<head>
<title></title>
<script src="Jquery.js">
</script>
</head>
<body>
<div class="nav">
<dl>
<dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
</dt>
<dt>
<dd>Four</dd>
<dd>Five</dd>
<dd>Six</dd>
</dt>
<dt>
<dd>Seven</dd>
<dd>Eight</dd>
<dd>Nine</dd>
</dt>
</dl>
</div>
<div class="sideBar"></div>
<script type="text/javascript">
var Sides={
sideBar:$("div.sideBar"),
nav:$("div.nav"),
dd:$("div.nav dd"),
dt:$("div.nav dt"),
init:function () {
Sides.sideBar.on("mouseenter",this.show);
},
show:function () {
Sides.nav.close.call(nav);
Sides.nav.fadeIn(2000).filter(":nth-child(n+8)").hide();
Sides.dd.on("click",function () {
Sides.dd.next("dt").slideDown(500).siblings("dt").hide();
})
},
close:function () {
Sides.nav.on("mouseleave",function () {
$(this).fadeOut(1400)
})
}
}
Sides.init();
</script>
</body>
</html>