jquery - CodeSlider 选项卡大小调整

Question

我正在使用 this jquery插件。这是我的 html:

<div class="account_window" style="display:none;">
    <div class="coda-slider"  id="slider-id">
      <div>
        <h2 class="title">Option1</h2>
        <p>Stuff for option 1</p>
      </div>
      <div>
        <h2 class="title">Password</h2>
        <form id="change_Pass" action="" method="post">
            Current Password<span style="color:red;">*</span><input type="password" id="change_password" name="change_password"><br>
            New Password<span style="color:red;">*</span><input type="password" id="new_password" name="new_password"><br>
            Verify Password<span style="color:red;">*</span><input type="password" id="verify_password" name="verify_password"><br>
            <input type="submit" value="Submit" id="change_pass_submit">
         </form>
      </div>
    </div>
</div>

这是 jquery:

$('#slider-id').codaSlider({
    firstPanelToLoad: 1,
    dynamicArrows: false
});

因此，当我删除此行 style="display:none;" 时，选项卡可以正常工作并且看起来很完美。但是当我添加它时，选项卡看起来像这样:

我不知道为什么。没有控制台错误。 Here是该问题的工作演示。为什么显示这么奇怪？

Answer 1

您遇到的问题是因为 Coda Slider 在初始化时在 slider 周围创建了一个包装元素，这在其父元素被隐藏的情况下不能很好地发挥作用。

解决方法是在 account_window 可见之后 初始化 slider 。

为此，将您的 jQuery 更改为:

$('#show_coda').click(function(){
  $('.account_window').show();

  $('#slider-id').codaSlider({
    firstPanelToLoad: 1,
    dynamicArrows: false
  });
});