Question

我猜我的if / else逻辑是偏斜的。基本上我有一个手风琴结构，在页面加载时，第一个手风琴窗格被半透露到150px的高度。然后，当用户点击手风琴标题时，它会完全打开到320px的高度。在下一次点击时，它应该像其他手风琴元素一样关闭并正常运行，并带有标准的隐藏/显示。它目前工作正常，但它不平滑，手风琴窗格在完全显示之前关闭。

这是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');
                }
     });

Answer 1

更新：哎呀，如果我读到这个问题会有所帮助 - Here is a demo：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');

手风琴if / else逻辑

1 个答案: