我需要建立一个与此类似的顶部菜单：http : //delaespada.com
这是我在的位置：
的HTML
<div class="wrap">
<div id="panel1">
<h1>PANEL1</h1>
</div>
<div id="panel2">
<h1>PANEL2</h1>
</div>
<div id="panel3">
<h1>PANEL3</h1>
</div>
<div id="panel4">
<h1>PANEL4</h1>
</div>
<div id="panel5">
<h1>PANEL5</h1>
</div>
</div><!--end wrap-->
<ul class="nav">
<li><a class="1" href="#">link1</a></li>
<li><a class="2" href="#">link2</a></li>
<li><a class="3" href="#">link3</a></li>
<li><a class="4" href="#">link4</a></li>
<li><a class="5" href="#">link5</a></li>
</ul>
JQUERY
$(document).ready(function(){
$("a.1").click(function(event){
event.preventDefault();
$("#panel2").css({height:0,top:-500});
$("#panel3").css({height:0,top:-500});
$("#panel4").css({height:0,top:-500});
$("#panel5").css({height:0,top:-500});
$("#panel1").css({height:150,top:20});
});
$("a.2").click(function(event){
event.preventDefault();
$("#panel1").css({height:0,top:-500});
$("#panel3").css({height:0,top:-500});
$("#panel4").css({height:0,top:-500});
$("#panel5").css({height:0,top:-500});
$("#panel2").css({height:150,top:20});
});
$("a.3").click(function(event){
event.preventDefault();
$("#panel1").css({height:0,top:-500});
$("#panel2").css({height:0,top:-500});
$("#panel4").css({height:0,top:-500});
$("#panel5").css({height:0,top:-500});
$("#panel3").css({height:150,top:20});
});
$("a.4").click(function(event){
event.preventDefault();
$("#panel1").css({height:0,top:-500});
$("#panel2").css({height:0,top:-500});
$("#panel3").css({height:0,top:-500});
$("#panel5").css({height:0,top:-500});
$("#panel4").css({height:150,top:20});
});
$("a.5").click(function(event){
event.preventDefault();
$("#panel1").css({height:0,top:-500});
$("#panel2").css({height:0,top:-500});
$("#panel3").css({height:0,top:-500});
$("#panel4").css({height:0,top:-500});
$("#panel5").css({height:150,top:20});
});
$(".wrap").mouseleave(function(){setTimeout(function(){$("#panel1, #panel2, #panel3, #panel4, #panel5").css({height:0,top:-500})},2000);
});
});
有没有一种方法可以简化jquery代码？
有时setTimeOut函数工作异常，我在做什么错？而且我还需要一种方法，当鼠标重新位于面板中时停止setTimeOut函数。
请看一下http://jsfiddle.net/aPzSP/1/
提前致谢
您可以通过以下方式简化它：
HTML：
panel所有小组共同上课menuLink来源：
<div class="wrap">
<div id="panel1" class="panel">
<h1>PANEL1</h1>
</div>
<div id="panel2" class="panel">
<h1>PANEL2</h1>
</div>
<div id="panel3" class="panel">
<h1>PANEL3</h1>
</div>
<div id="panel4" class="panel">
<h1>PANEL4</h1>
</div>
<div id="panel5" class="panel">
<h1>PANEL5</h1>
</div>
</div>
<!--end wrap-->
<ul class="nav">
<li><a class="menuLink" href="#panel1">link1</a>
</li>
<li><a class="menuLink" href="#panel2">link2</a>
</li>
<li><a class="menuLink" href="#panel3">link3</a>
</li>
<li><a class="menuLink" href="#panel4">link4</a>
</li>
<li><a class="menuLink" href="#panel5">link5</a>
</li>
</ul>
JS：
$(document).ready(function () {
var timeout, $panel = $('.panel');
//Just bind event handler once
$(".menuLink").click(function (event) {
event.preventDefault();
//Clear any timeout if clicked withing 2 sec after hovering out of wrap
clearTimeout(timeout);
//get the target element reading the href and set its css
var $target = $(this.getAttribute('href')).css({
height: 150,
top: 20
});
//Do for all panels but the target.
$panel.not($target).css({
height: 0,
top: -500
});
});
$(".wrap").mouseleave(function () {
timeout = setTimeout(function () {
$panel.css({
height: 0,
top: -500
})
}, 2000);
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句