0

私はZurb Foundationをフレームワークとして使用しており、jQueryを使用して、ドロップダウンボックス<div>に基づいてFoundationを含むを表示/非表示にしています。<select>jQuery は非常に単純です。

$(document).ready(
  function()
 {
  $('.dropdown').hide();
  $('#divsp1').show();
  $('select').data("previous-value", $('select').val());
  $('select').change(function() {
    var previousValue = $(this).data("previous-value");
    $('#divsp' + previousValue).hide();
    $('#divsp' + $(this).val()).show();
    $(this).data("previous-value", $(this).val());
  });
}
);

簡略化された HTML は次のとおりです。

<div id="divsp1" class="dropdown">
  <div class="section-container auto" data-section>
    <section class="active">
      <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
      <div class="content" data-section-content>
        <p>Content of section 1.</p>
      </div>
    </section>
    <section>
      <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
      <div class="content" data-section-content>
        <p>Content of section 2.</p>
      </div>
    </section>
  </div>
</div>
<div id="divsp2" class="dropdown">
  <div class="section-container auto" data-section>
    <section class="active">
      <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
      <div class="content" data-section-content>
        <p>Content of section 3.</p>
      </div>
    </section>
    <section>
      <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
      <div class="content" data-section-content>
        <p>Content of section 4.</p>
      </div>
    </section>
  </div>
</div>

<form autocomplete="off">
<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
</form>

初期値以外を選択すると、選択<div>が消えます。ウィンドウのサイズが変更された場合にのみ再表示されます。こちらのビデオでもこの動作をキャプチャしました。

ウィンドウのサイズが変更されると、jQuery select は必要に応じて機能します。この問題は、Windows と Mac OS X の両方の Firefox と Chrome で発生しています。

この問題を引き起こしている jQuery に何か問題がありますか?

編集

これを Foundation と jQuery の問題に絞り込みました。私はバニラ Foundation でサイトを作成し、同じことをしようとしました: <div>jQuery 経由で切り替え可能な Foundation パネルを含みます。運がない。同じことを達成するには、別の方法を見つける必要があります。

4

2 に答える 2