質問する前に、解決しようとしている問題について説明したいと思います。
ブートストラップで作成したページがあります
http://inants.com/kadmos/web/kad/bootres/ji/break.html
ブラウザー ページのサイズを変更するときに、左側のメニュー (スクリーンショットの左側の部分) に使用したブートストラップの左側のタブが、ブートストラップの折りたたみメニュー (スクリーンショットの右側の部分) になるようにする必要がありました。
スクリーンショットはこちら: http://inants.com/kadmos/web/menu.png
しかし、問題は、異なる html コードとブートストラップ クラスを持つ必要があることです。そのため、必要なタグとクラスを追加および削除する jquery コードを作成しました。たとえば、ブラウザーが全画面表示の場合、html コードは次のようになります。
<div class="tabbable tabs-left">
<button type="button" style="display:none;" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#A">My Visited Jobs</a>
</li>
<li>
<a data-toggle="tab" href="#B">My Saved Jobs</a>
</li>
<li>
<a data-toggle="tab" href="#C">My Searches</a>
</li>
<li>
<a data-toggle="tab" href="#D">My Alets</a>
</li>
<li>
<a data-toggle="tab" href="#E">My Profile</a>
</li>
<li>
<a data-toggle="tab" href="#F">My Settings</a>
</li>
</ul>
<div class="tab-content"></div>
</div>
レスポンシブ ビューでは、次のコードが必要です。
<div class="tabbable tabs-left navbar navbar-inverse openNavbar">
<button type="button" style="display:block;" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#A">My Visited Jobs</a>
</li>
<li>...
</li>
</ul>
</div>
<div class="tab-content"></div>
</div>
したがって、レスポンシブ モードでは、次の変更が html で行われていることがわかります。
「navbar navbar-inverse openNavbar」ブートストラップ クラスは、「tabbable」クラスを持つ div に追加されます
「タブ可能」クラスを持つ div では、「ボタン」には display:block; があります。
「ul」タグは、「nav-collapse collapse」クラスを持つ div 内に挿入されます
上記の html コードの変更に対応する jquery コードは次のとおりです。
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
if ($(window).width() <= 979) {
$('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
if ($('.nav').parent().hasClass('tabbable')) {
$('.nav').wrap('<div class="nav-collapse collapse"></div>');
}
$('.content > .tabbable > button').show();
} else {
$('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
if (!$('.nav').parent().hasClass('tabbable')) {
$('.nav').unwrap()
}
$('.content > .tabbable > button').hide();
}
});
if ($(window).width() <= 979) {
$('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
if ($('.nav').parent().hasClass('tabbable')) {
$('.nav').wrap('<div class="nav-collapse collapse"></div>');
}
$('.content > .tabbable > button').show();
} else {
$('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
if (!$('.nav').parent().hasClass('tabbable')) {
$('.nav').unwrap()
}
$('.content > .tabbable > button').hide();
}
});
</script>
すべて問題ないように見えますが、正常に動作するはずですが…</p>
Mozilla (Internet Explorer 9) でページのサイズを 979px から 963px の間で変更すると、ページが壊れます。特に、bootstrap-responsive.css、bootstrap.css、style.css ファイルに適切なコードが記述されている @media (max-width: 979px) {...} 条件では機能しません。問題は Mozilla (IE9) と Chrome のサイズの違いにあるように思えますが、firebug ではサイズが同じ場合、ページが一方のブラウザーでは正しく表示されず、他方のブラウザーでは正しく表示されません。条件 $(window).width() <= 979) を $(window).width() < 979) に変更すると、ちょうど逆になります...
このバグの解決策に関するご提案をお待ちしております。
前もって感謝します。