0

私はこの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;"と、タブが機能し、完璧に見えます。しかし、それを追加すると、タブは次のようになります。
CodaSlider

どうしてか分かりません。コンソールエラーはありません。これが問題の実用的なデモです。なぜこんなに奇妙に表示されるのですか？

4

1 に答える 1

2

あなたが抱えている問題は、Coda Sliderが初期化時にスライダーの周りにラッパー要素を作成するためです。これは、親要素が非表示になっているとうまく機能しません。

この回避策は、が表示された後account_windowにスライダーを初期化することです。

これを行うには、jQueryを次のように変更します。

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

  $('#slider-id').codaSlider({
    firstPanelToLoad: 1,
    dynamicArrows: false
  });
});
于 2012-10-21T07:39:37.943 に答える