Question

HTML

          <div class="accordion">
            <div id="step-1">
             <a href="#step-1" class="tab">Step 1 - Information</a>
              <div class="content">
                <div style="background: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis, arcu aliquam tempor ultrices, est arcu vehicula eros, in iaculis mauris mauris ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempus velit libero, vel dapibus dui vulputate sollicitudin. Etiam cursus mauris magna, et condimentum mauris rutrum at. Nam lectus eros, accumsan nec ligula at, euismod fringilla lectus. Fusce ac egestas neque, nec accumsan arcu. Nam consequat sem et interdum rutrum. Nam adipiscing massa et congue dignissim. Morbi cursus libero urna, in mollis ligula dignissim ac. Suspendisse et lacinia nibh, at convallis nunc. Vestibulum ipsum nulla, tincidunt id tempus id, sollicitudin quis nunc. Suspendisse potenti.

                </div>
              </div>
            </div>
            <div id="step-2">
              <a href="#step-2">Step 2 - Select</a>
              <div class="content">
                <div style="background: green;">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis, arcu aliquam tempor ultrices, est arcu vehicula eros, in iaculis mauris mauris ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempus velit libero, vel dapibus dui vulputate sollicitudin. Etiam cursus mauris magna, et condimentum mauris rutrum at. Nam lectus eros, accumsan nec ligula at, euismod fringilla lectus. Fusce ac egestas neque, nec accumsan arcu. Nam consequat sem et interdum rutrum. Nam adipiscing massa et congue dignissim. Morbi cursus libero urna, in mollis ligula dignissim ac. Suspendisse et lacinia nibh, at convallis nunc. Vestibulum ipsum nulla, tincidunt id tempus id, sollicitudin quis nunc. Suspendisse potenti.

                  </div>
                </div>
                </div>
          </div>
        </div>

CSS

    .accordion .tab {
  border-top: 1px solid #5b5b5b;
  display: block;
  height: 50px;
  text-decoration: none;
  color: #888;
}

.accordion .tab:hover,
.accordion div:target .tab {
  color: #000;
  border-top: 1px solid #7c7c7c;
}

.accordion div .content {
  display: none;
}

.accordion div:target .content {
  display: block;
}

.accordion > div {
  height: 50px;
  overflow: hidden;
}

.accordion > div:target {
  height: 300px;
}

JS

 $('.accordion .tab').on('click', function(event) {
        var parent_tab = $(this).parent();
        if (parent_tab.hasClass('active'))
            $(".accordion .tab div.content:visible").slideToggle("normal");
        else {
            $(".accordion .tab div.content:visible").slideToggle("normal");
            $(this).parent().find(".content").slideToggle("normal");
        }
    });

问题是，对于css3，它的行为与网站fortheloveoflaundry.com的行为不同

因此尝试使用jquery来实现平滑的滑动手风琴 - 当单击标签一次或两次时，面板不会平滑地向上或向下滑动。认为JQuery无法正常工作。

帮助表示赞赏

Answer 1

您已使用slideToggle为其设置动画，因此您不需要任何CSS转换以及更改height规则中的:target的CSS代码。您的演示中可以删除许多CSS代码（我只是将它们注释掉）。这是更新的脚本：

//hide the content intially
$('.accordion div .content').slideToggle(0);   
$('.accordion .tab').on('click', function(event) {
    var parent_tab = $(this).parent();
    if (parent_tab.hasClass('active')) return;                    
    $('.active div.content').slideToggle();
    $(this).next("div.content").slideToggle();              
    $('.accordion .active').removeClass('active');
    parent_tab.addClass('active');       
});

Demo.

更新：如果您想要jQuery UI中的accordion小部件中的 可折叠 功能，您可以尝试 {{3相反。。

单击选项卡时，可以平滑地向上和向下滑动内容

1 个答案:

Demo.