Закройте другие панели перед открытием другой

Я искал вокруг и вокруг, и я не могу найти или понять это. Может быть, я что-то видел, но не был уверен, как интегрировать это в то, что у меня есть... Я не уверен. Я решил проглотить свою гордость и спросить. Я новичок в 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

slider jquery tabs panels
person Illusive Minds Media    schedule 17.06.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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 и просто стилизовать их, поскольку они уже реализуют нужное вам поведение.

person Lucien Stals    schedule 17.06.2015
comment
Хорошо, я посмотрю на это прямо сейчас. Большое Вам спасибо. - person Illusive Minds Media; 17.06.2015

arrow_upward
0
arrow_downward

Поэтому, посмотрев и изучив пользовательский интерфейс вкладок jQuery, я не мог понять, как заставить его работать для того, что я пытался сделать. Итак, мы с другом разобрались с этим фрагментом кода. Думал, что опубликую это для других, чтобы они могли использовать. Надеюсь, это поможет кому-то когда-нибудь.

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

        });
    });
person Illusive Minds Media    schedule 02.07.2015