jQuery幻灯片菜单新手
今天学习jQuery,并设法让自己这个幻灯片菜单,我只是想知道是否有办法让代码更简化?jQuery幻灯片菜单新手
似乎并不在的jsfiddle工作?但当你点击关于我,项目等下面出现一个框..
可以缩短以减少css或jquery代码(或两者),就像使用相同的类为每个不同的盒子会好...
$(document).ready(function() {
$("#box1").click(function() {
$('.dropbox').slideToggle("slow");
});
$("#box2").click(function() {
$('.dropbox2').slideToggle("slow");
});
$("#box3").click(function() {
$('.dropbox3').slideToggle("slow");
});
});
您可以打开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;
}
而且顺便说一句你需要从左边的面板“Frameworks & Extensions”中选择你的小提琴中的jquery。
如果你想切换当前的Dropbox,你可以什么时候效果基本show其他只是做:
$(document).ready(function() {
var $dropBoxes = $('.dropbox');
$(".box").click(function() {
$dropBoxes.not($(this).next('.dropbox').slideToggle("slow")).slideUp('slow');
});
});
非常感谢! –
@ CallamWarner-Billington欢迎您。希望这是你在找什么? – PSL
是的,这是教我新的东西(并将在未来帮助)。我知道有可能缩短它,但不知道如何,再次感谢! –
你忘了添加jQuery库,在这里修复你的jsfiddle http://jsfiddle.net/jkuVG/ 4/ –