在打开另一个面板之前关闭其他面板

Question

我环顾四周，找不到或弄清楚这一点。也许我看到了一些东西，但不确定如何将其集成到我所拥有的东西中......我不确定。我决定吞下我的骄傲并问。我是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 

Answer 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 选项卡并设置它们的样式，因为它们已经实现了您想要的行为。

Answer 2

因此，在查看并了解了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>

j查询：

$(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");
            };               
        });
    });