логика аккордеона if / else - PullRequest
Новая
       17

логика аккордеона if / else

1 голос
/ 28 октября 2010

Я предполагаю, что моя логика if / else искажена.По сути, у меня есть структура аккордеона, где при загрузке страницы первая панель аккордеона наполовину раскрывается до высоты 150 пикселей.Затем, когда пользователь нажимает на заголовок аккордеона, он полностью открывается на высоту 320 пикселей.При следующем щелчке он должен закрыться и работать как обычные элементы аккордеона со стандартным скрытием / показом.В настоящее время он работает нормально, но не гладко, и панель аккордеона закрывается до того, как полностью раскрывается.

Вот HTML: 

<div class="accordion">
      <h3 class="acc-header glanceH">At a glance</h3>
      <div class="acc-content glanceC slider" >
        <div class="hero-video">
        </div>
      </div>
      <h3 class="acc-header">What we do</h3>
      <div class="acc-content" >
        <div class="hero-video what-we-do">
        </div>
      </div>
      <h3 class="acc-header">How we do it</h3>
      <div class="acc-content how" >
      </div>
      <h3 class="acc-header">Where we reach</h3>
      <div class="acc-content where" >
      </div>
      <h3 class="acc-header">How</h3>
      <div class="acc-content" >
      </div>
    </div>

Вот jQuery: 

//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked 

$('.acc-header').click(function(e) {
        e.preventDefault();
        $(this).toggleClass('acc-active');
        $(this).next('.acc-content').slideToggle(200).siblings('.acc-content').slideUp(200);
        $(this).siblings().removeClass('acc-active');       
    });

//when the page loads 'peek' at the content of the first accordion content (to 150px depth)

    $('.slider').css('height','150px');
    $('.slider').animate({ height: 'show'}, 'slow').addClass('itsopen');    

//if its already been opened, close it, else open it to 320px

    $('.glanceH').click(function() {
              if(!$(this).hasClass('acc-active')) {
                    $(this).next().siblings('.acc-content').slideUp(2000);
                    $(this).siblings().removeClass('acc-active');
                }
              else if($('.slider').hasClass('itsopen')){
                    $('.slider').animate({ height: 320}, 'slow');
                }
     });

1 Ответ

0 голосов
/ 28 октября 2010

Обновление: К сожалению, было бы полезно, если бы я прочитал вопрос - Вот демоверсия : P 

//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.accordion .acc-header').click(function() {
    var first = $('.slider');

    // open peek if clicked, otherwise hide it
    if (first.is('.itsopen')) {
        if ($(this).next().is('.acc-active')) {
            // open peek to full height
            first.removeClass('itsopen').animate({ height: '320px' }, 'slow');
            return;
        } else {
            // close first because a different header was clicked
            first.removeClass('itsopen acc-active').slideUp('slow');
        }
    }

    // remove active class from all content
    $('.acc-content').removeClass('acc-active');
    // show active content
    $(this).next().addClass('acc-active').toggle('slow');
    // close all content that isn't active
    $('.acc-content:not(.acc-active').slideUp('slow');
    return false;

})
// initialize accordion with all content closed
.next().hide();

//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider')
    .css({ height: '0px' })
    .show()
    .animate({ height: '150px' }, 'slow')
    .addClass('itsopen acc-active');
...