0

CSSとjQueryを使用してレスポンシブにしたドロップダウンメニューがあります。ウィンドウが縮小された場合、モバイル ナビゲーションは問題なく表示されますが、メニューを展開して閉じてからウィンドウのサイズを大きく変更すると、インライン表示のため、デスクトップ ナビゲーションは再表示されません。slideToggle によって追加されたものはありません。私の人生では、ウィンドウサイズが再び大きくなったときにメニューを再表示する方法がわかりません。

HTML

<div class="nav">
        <div class="mobile-nav">Navigation</div>
        <ul class="primary">
            <li><a href="#link">Link</a></li>
            <li><a class="has-drop">Link w/ Children <span></span></a>
                <ul class="drop">
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                </ul>
            </li>
            <li><a class="has-drop" href="#link">Link w/ Children <span></span></a>
                <ul class="drop">
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                    <li><a href="#link">Link</a></li>
                </ul>
            </li>
            <li><a href="#link">Link</a></li>
            <li><a href="#link">Link</a></li>
        </ul>
        <div class="clear"></div>
    </div>

CSS

.clear{clear:both}
.nav{display:block;width:100%;background:#222}
.mobile-nav{visibility:hidden;padding:0;height:0;background:#222}
ul.primary{background:#222;list-style:none;height:45px;min-width:350px;position:relative;margin:10px 0 0 0;padding:0;float:right;display:block}
ul.primary li{float:left;display:inline;font-weight:bold;font-size:13px;max-width:100%}
ul.primary li a,ul.drop li a{display:block;padding:10px;color:white;text-decoration:none}
ul.drop li a{padding:5px}
ul.primary li a:hover,ul.drop li a:hover{background:#444}
ul.primary li,ul.drop li{font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif}
ul.primary li.active>a{background:#444}
a.has-drop{cursor:pointer}
a.has-drop span{margin:-8px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret.png") no-repeat center right}
li.active>a.has-drop span{margin:-8px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret-up.png") no-repeat center right}
ul.drop{display:none;z-index:999;position:relative;margin:0;padding:0;min-width:100%;width:auto;list-style:none;background:#242424;border:0}
ul.drop li{float:none;font-weight:normal}
@media only screen and (max-width:767px){
nav{display:block;width:100%;border:0 solid white;padding:10px 0}
.mobile-nav{visibility:visible;height:auto;margin:0 5px;padding:10px 0;font-weight:bold;color:white;cursor:pointer;background:url("mobile-nav.png") no-repeat center right}
ul.primary{float:none;display:none;height:auto;margin:0;padding:0}
ul.primary li{display:block;float:none;border-bottom:1px solid #444}
ul.primary li:last-child{border-bottom:0}
ul.drop li,ul.primary li.active{border-bottom:0}
ul.drop li a{text-indent:15px;font-size:12px;font-style:italic}
a.has-drop span{margin:5px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret.png") no-repeat center right}
li.active>a.has-drop span{margin:5px 0 0 5px;width:10px;height:5px;float:right;background:url("drop-caret-up.png") no-repeat center right}}​

jQuery

var $j = jQuery.noConflict();
$j(document).ready(function () {
$j('ul.primary li').click(function () {
var a = this;
if ($j('ul', this).is(':visible')) {
    $j('ul', this).slideUp(function () {
        $j(a).removeClass('active')
    })
} else {
    $j('ul.drop').slideUp();
    $j('ul.primary li').removeClass('active');
    $j('ul', this).slideDown();
    $j(a).addClass('active')
}
});
$j('body').click(function (a) {
if (!$j(a.target).is('a')) {
    $j('ul.drop').slideUp();
    $j('ul.primary li').removeClass('active')
}
});
$j(function () {
$j('.mobile-nav').click(function (e) {
    $j('.primary').slideToggle(150, "swing");
    e.stopPropagation()
});
$j(window).resize(function() {
    $j('ul.drop').slideUp();
    $j('ul.primary li').removeClass('active')
});
})
});

完全なマークアップと jQuery は次のとおりです: http://jsfiddle.net/mhXkM/

どんな助けでも大歓迎です。

4

2 に答える 2

2

この小さなスニペットを使用style="display:none;"して、リストに適用されている可能性が高く、サイズ変更時に削除されていない可能性のあるものを「適用解除」できます。これによりdisplay: (nothing here);、ウィンドウのサイズが768ピクセルを超える場合にリセットされます。

$(function(){
     $(window).resize(function(){
         if($(this).width() >= 768){
             $('#your-element-name').css('display', '');
         }
      })
      .resize(); 
});
于 2012-12-09T01:21:45.457 に答える
0

私が見つけた最善の解決策は、次のように windowResize 関数に removeAttr を追加することです。

$j(window).resize(function() {
$j('ul.drop').slideUp();
$j('ul.primary li').removeClass('active')
});

これにより、ディスプレイが削除されます。ウィンドウがデスクトップ サイズにサイズ変更された場合のモバイル ビューによる原因はありませんが、モバイル ビューで表示した場合は再度適用できます。

于 2012-11-29T18:09:53.827 に答える