jQuery幻灯片菜单新手

Question

今天学习jQuery，并设法让自己这个幻灯片菜单，我只是想知道是否有办法让代码更简化？

http://jsfiddle.net/jkuVG/2/

似乎并不在的jsfiddle工作？但当你点击关于我，项目等下面出现一个框..

可以缩短以减少css或jquery代码（或两者），就像使用相同的类为每个不同的盒子会好...

$(document).ready(function() { 
$("#box1").click(function() { 
    $('.dropbox').slideToggle("slow"); 
}); 
    $("#box2").click(function() { 
    $('.dropbox2').slideToggle("slow"); 
    }); 
    $("#box3").click(function() { 
    $('.dropbox3').slideToggle("slow"); 
}); 
}); 

Answer 1

您可以打开ids只是一个普通类名和附加一个处理它。

HTML：

<div class="box"> 
    <p>About me</p> 
</div> 
<div class="dropbox"> 
    <p>a wild potato appeared</p> 
</div> 
<div class="box">Projects</div> 
<div class="dropbox"> 
    <p>ja</p> 
</div> 
<div class="box">Websites</div> 
<div class="dropbox"> 
    <p>hey</p> 
</div> 

JS：

$(document).ready(function() { 
    $(".box").click(function() { 
     $(this).next('.dropbox').slideToggle("slow"); 
    }); 
}); 

CSS：

* { 
    margin: 0 auto; 
} 
.box:first-child{ 
    margin-top: 20px; 
} 
.box { 
    background-color: red; 
    max-width: 470px; 
    padding: 10px; 
} 
.box:hover { 
    background-color: yellow; 
} 

.dropbox { 
    max-width: 470px; 
    padding: 10px; 
    background-color: black; 
    display: none; 
    color: white; 
} 

Demo

而且顺便说一句你需要从左边的面板“Frameworks & Extensions”中选择你的小提琴中的jquery。

如果你想切换当前的Dropbox，你可以什么时候效果基本show其他只是做：

$(document).ready(function() { 
    var $dropBoxes = $('.dropbox'); 
    $(".box").click(function() { 
     $dropBoxes.not($(this).next('.dropbox').slideToggle("slow")).slideUp('slow'); 
    }); 
});