jquery - 以编程方式在打开模式和 CSS 时首先在选项卡上设置步骤 1 - Accordion 滑动流畅

Question

Jsfiddle - modal tabs

HTML

<div id="modal-signup" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="border:0!important; box-shadow: none!important;">
  <div class="mod-signup-wrapper" >
    <div class="modal-header">
      <h3>Sign up a new account</h3>
    </div>
    <div class="modal-body">
      <div class="accordion">
        <div id="step-1">
         <a href="#step-1" class="tab">Step 1 - Information</a>
          <div class="content">
            <div style="background: #fff;">
            <form>
                <input type="text" placeholder="Email Address" name="email">
                <input type="text" placeholder="Password" name="password">
                <input type="text" placeholder="Full Name" name="fullName">
            </form>
            </div>
          </div>
        </div>
        <div id="step-2">
          <a href="#step-2">Step 2 - Select</a>
          <div class="content">
            <div style="background: #fff;">
            skdjfhskfhskdfjksf
              </div>
            </div>
            </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;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

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

尝试使用 herf="step-1"并且由于带有/test#step-1 的 url 有所帮助，它在某些页面上(不是在网站上)工作。单击模式打开时，它首先显示步骤 1 选项卡。但是在其他带有 url/#step-1 的页面上，第 1 步选项卡不会在打开模式时显示。有没有办法打开第一个选项卡，无论是/test#step-1 还是/#step-1？

Accordion 似乎不像这个网站那样流畅或滑动:http://www.fortheloveoflaundry.com/

我不确定为什么 Accordion 不能顺畅地上下滑动。试图改变过渡、高度和其他 css..但无济于事。有没有什么办法可以不使用Jquery让它滑动的很流畅？

Answer 1

这是我知道的唯一方法，如果您需要修改，请告诉我:http://jsfiddle.net/JWfdx/2/

$(function(){
    $('.tab').click(function(){ 
     $(this).parent().siblings().animate({height:'50px'},500);
        $(this).parent().animate({height:'200px'},500);

    });
});