我目前正在尝试使用 jQuery 构建一个快速下拉原型(prototype),但我的 jQuery 知识可能有限,所以我希望能得到一些帮助来解决我的问题。
我想要实现的目标是:当用户将鼠标悬停在链接上时,下拉菜单会向下动画,当用户单击另一个链接时,下一个下拉菜单会在顶部以动画方式播放,依此类推。
这是 HTML:
<div class="wrapper">
<div class="dropdowns">
<ul>
<li class="call"><a href="#">Call</a></li>
<li class="chat"><a href="#">Chat</a></li>
<li class="message"><a href="#">Send a message</a></li>
</ul>
</div>
<div class="slide call-panel">
<h1>Call now</h1>
</div>
<div class="slide chat-panel">
<h1>Online chat</h1>
</div>
<div class="slide message-panel">
<h1>Send us a message</h1>
</div>
</div>
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.dropdowns {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
.call a {
background: #f1f1f1;
}
.chat a {
background: #e1e1e1;
}
.message a {
background: #f1f1f1;
}
a {
display: block;
width: 33.333%;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.call-panel {
height: 300px;
background: darkgrey;
display: none;
}
.chat-panel {
height: 300px;
background: darkgrey;
display: none;
}
.message-panel {
height: 300px;
background: darkgrey;
display: none;
}
h1 {
margin: 0;
padding: 0;
}
JS:
$( ".call a" ).click(function() {
toggleSlides( ".call-panel" );
});
$( ".chat a" ).click(function() {
toggleSlides( ".chat-panel" );
});
$( ".message a" ).click(function() {
toggleSlides( ".message-panel" );
});
function toggleSlides(slide){
$(".slide").slideUp ( "slow", function(){
$(slide).slideDown( "slow" );
} );
}
我已经在这里设置了一个我目前拥有的东西的快速 fiddle ,但是你会看到它并没有完全按照我的预期工作,我得到的动画是上升而不是下降,一些疯狂的重复动画,各种各样- 任何帮助都会很棒!
最佳答案
你可以使用 jquery this.hash;
$('.dropdowns li a').removeClass('active');
$('.dropdowns li a').click(function(){
var tabDiv = this.hash;
$('.slide').hide();
$(this).addClass('active');
$(tabDiv).slideDown();
return false;
});
关于javascript - jQuery 下拉建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24821478/