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

【问题标题】：Close other panels before opening another在打开另一个面板之前关闭其他面板
【发布时间】：2015-06-17 02:39:48
【问题描述】：

我环顾四周，找不到或弄清楚这一点。也许我已经看到了一些东西，但不确定如何将它整合到我拥有的东西中......我不确定。我决定收起我的骄傲，问。我是 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

【问题讨论】：

标签： jquery tabs slider panels

【解决方案1】：

jQuery(函数 ($) {

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

【讨论】：

好的，我现在就调查一下。非常感谢。

【解决方案2】：

因此，在查看并了解了 jQuery 的选项卡 UI 之后，我无法弄清楚如何使它适用于我想要做的事情。所以我和一个朋友想出了这个sn-p的代码。以为我会发布它供其他人使用。希望它对某人有所帮助。

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

        });
    });

【讨论】：