jquery - CodeSlider 选项卡大小调整

Question

我正在使用这个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;"，选项卡可以正常工作并且看起来很完美。但是当我添加它时，选项卡看起来像这样：

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

Answer 1

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

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

为此，请将您的 jQuery 更改为：

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

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