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在初始化时会在滑块周围创建一个包装元素，而这个元素在隐藏其父元素时效果不佳。

解决方法是在 account_window可见之后使滑块初始化。

为此，请将jQuery更改为：

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

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