0

Webdesigntuts+ のこのチュートリアルに基づいて、サブメニュー/ドロップダウンをサポートするレスポンシブ JavaScript メニューを実装しています。

残念ながら、デバイスの向きを変更するか、ブラウザの幅を変更するまで、サブメニュー/ドロップダウン システムは機能しません。

JavaScript / jQuery コードは次のとおりです。

var ww = $(window).width();

$(document).ready(function() {

adjustMenu();

$(".nav li a").each(function() {
    if ($(this).next().length > 0) {
        $(this).addClass("parent");
    };
})

$(".toggle-menu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $(".nav").toggle();
});

});

$(window).bind('resize orientationchange', function() {
    ww = $(window).width();
    adjustMenu();
});

var adjustMenu = function() {
    if (ww <= 480) {
        $(".toggle-menu").css("display", "inline-block");
        if (!$(".toggle-menu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww > 480) {
        $(".toggle-menu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

サンプル HTML を次に示します。 

 <a class="toggle-menu" href="#"><img src="/images/responsive/menu.png" alt="Menu"></a>
    <ul class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About Us</a></li>
        <li><a href="/url/">Menu item</a>
            <ul>
                <li><a href="/url/">Menu item intro</a></li>
                <li><a href="/url/sub1/">Submenu item 1</a></li>
                <li><a href="/url/sub2/">Submenu item 2</a></li>
                <li><a href="/url/sub3/">Submenu item 3</a></li>
            </ul>
        </li>
    </ul>

.toggle-menu リンクがクリックされるまで、ナビゲーション メニューは最初から非表示になっています。また、親リンクがクリックされるまで、サブ ナビゲーションは非表示になります。

jQuery/JavaScript の経験が豊富な方は、解決策を提案していただけますか?

どうもありがとう！

4

1 に答える 1

1

ある種の一般的な規則として (そして経験に基づいて)、 で寸法 (幅、高さなど) の評価を処理するのはちょっと不安定ですdocument.ready。なぜなら、ページ レイアウトがまだレイアウトされていない可能性が非常に高いからです。そのため、要素の値widthとheight要素の値がまだ評価されていない可能性があります。

の代わりにadjustMenu()、たとえば への呼び出しを入れてみてください。$(window).load()$(document).ready()

また、var ww = $(window).width()呼び出しをadjustMenu()関数自体に移動することをお勧めします。

編集

var adjustMenu = function () {
        var ww = $window.width();
        // the rest of your adjustMenu function
    },
    $window = $(window).bind('resize orientationchange load', adjustMenu)
    ;

$(document).ready(function () {
    // your original document ready handler
    // EXCEPT for the adjustMenu() call
});
于 2013-06-14T10:47:14.753 に答える