私は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 パネルを含みます。運がない。同じことを達成するには、別の方法を見つける必要があります。