我环顾四周,无法找到或弄清楚这一点。也许我已经看到了一些东西,但不知道如何将它整合到我所拥有的......我不确定。我决定吞下自己的骄傲并问。我是Javascript / jquery的新手,我被困住了。
我创建了一行按钮,所有按钮都滑动了一个面板。我让所有按钮都正常工作,缺少一件事。我希望一次只打开一个面板。因此,如果一个面板打开并且我点击了另一个按钮,则打开的面板将会滑动,然后下一个面板会滑动。
如果我的脚本是一个小小的皱纹,那么任何评论都会受到赞赏。
谢谢。
该网站的链接是http://greenmountainfarmtoschool.org/dev_site/
我的jQuery:
jQuery(function ($) {
$(document).ready(function() {
$(function () {
$('.action-btn').on('click', function () {
var sliderID = $(this).attr('data-sliderid');
if ($('.' + sliderID).is(":hidden")) {
$('.' + sliderID).slideDown("slow");
}
if($(div).hasClass('down')) {
.slideUp("slow");
}
else {
$('.' + sliderID).slideUp("slow");
}
});
});
});//end of docready
$(window).load(function() { });//end of windowload
});//end of $ block
答案 0 :(得分:1)
jQuery(function($){
$(document).ready(function() {
$(function () {
$('.action-btn').on('click', function () {
/**
* since all the sliders are also in a 'wrapper' class, just
* slideUp all the wrapper, then slideDown the one you want.
*/
$('wrapper').slideUp("slow");
var sliderID = $(this).attr('data-sliderid');
if ($('.' + sliderID).is(":hidden")) {
$('.' + sliderID).slideDown("slow");
}
if($(div).hasClass('down')) {
.slideUp("slow");
}
else {
$('.' + sliderID).slideUp("slow");
}
});
});
});//end of docready
$(window).load(function() { });//end of windowload
});//end of $ block
另一种方法是使用jQuery UI选项卡,只需设置样式,因为它们已经实现了您想要的行为。
答案 1 :(得分:0)
所以在查看和了解jQuery的Tab UI之后,我无法弄清楚如何让它适用于我想要做的事情。 所以我和朋友想出了这段代码。 以为我会发布给其他人使用它。希望它能帮到某个人。
HTML:
<div class="section group">
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="ourPurposeSlider">
<h3>Our Purpose</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="whereWeWorkSlider">
<h3>Where We Work</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="staffSlider">
<h3>Meet the Staff</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="boardSlider">
<h3>Meet the Board</h3>
</div>
jQuery的:
$(function () {
$('.action-btn').on('click', function () {
var sliderID = $(this).attr('data-sliderid');
if( $('.active')[0] && !$('.' + sliderID).hasClass("active") ){
$('.active').slideUp("slow", function(){
$(this).removeClass('active');
$('.' + sliderID).slideDown("slow").addClass("active");
});
}else if( $('.active')[0] && $('.' + sliderID).hasClass("active") ){
$('.' + sliderID).slideUp("slow").removeClass("active");
}else{
$('.' + sliderID).slideDown("slow").addClass("active");
};
});
});