0

問題

ナビゲーションの開閉時にハンバーガー メニューと十字アイコンを切り替えるドロップダウン メニューがあります。ただし、ユーザーがメニューを開いてウィンドウのサイズを変更し、ウィンドウの幅がまだ 768px 未満 (まだ開いている) の場合、十字のみを表示する必要がある場合でも、両方のアイコンが重なり合って表示されます。

余談ですが、この Javascript スニペットの複雑さを単純化しようとしています。クラスの追加と削除is-visibleが正しい/最良のアプローチであったかどうかはわかりません。

JSFiddle: https://jsfiddle.net/bdmebsu8/

scripts.js

$(function(){

    // Window size
    if ($(window).width() <= 768) {
        $(".icon-cross").hide();
        $(".icon-menu").addClass("is-visible");
        $(".icon-menu").show();
    } else {
        $(".icon-menu").hide();
        $(".icon-menu").removeClass("is-visible");
    }

    $(window).resize(function(){
        var w = $(this).innerWidth();
        if (w > 768) {
            $(".nav__list--dropdown").hide();
            $(".icon-cross").hide();
            $(".icon-menu").hide();
            $(".icon-cross").removeClass("is-visible");
            $(".icon-menu").removeClass("is-visible");
        } else {
            $(".icon-cross").hide();
            $(".icon-menu").show();
            $(".icon-menu").addClass("is-visible");
        }
    });

    // Dropdown menu
    $(".nav__menu").on("click", function(){
        $(".is-hidden").slideToggle("slow");

        var menuVisible = $(".icon-menu").hasClass("is-visible")

        if (menuVisible) {
            $(".icon-menu").removeClass("is-visible");
            $(".icon-menu").hide();
            $(".icon-cross").addClass("is-visible");
            $(".icon-cross").show();
        } else {
            $(".icon-cross").removeClass("is-visible");
            $(".icon-cross").hide();
            $(".icon-menu").addClass("is-visible");
            $(".icon-menu").show();
        }
    });
});

index.html

<div class="dropdown">
                <ul class="nav__list--dropdown is-hidden">
                    <a href="#services" class="nav__item" target="_blank"><li class="item--services--dropdown">Services</li></a>
                    <a href="#projects" class="nav__item" target="_blank"><li class="item--projects--dropdown">Projects</li></a>
                    <a href="#teaching" class="nav__item" target="_blank"><li class="item--teaching--dropdown">Teaching</li></a>
                    <a href="https://medium.com/@onlyandrewn" class="nav__item" target="_blank"><li class="item--blog--dropdown">Blog</li></a>
                    <a href="#contact" class="nav__item" target="_blank"><li class="item--contact--dropdown">Contact</li></a>
                </ul>
            </div>

<div class="nav__menu">
                    <img src="src/img/sm-menu.png" class="icon-menu" alt="Open Menu">
                    <img src="src/img/cross-dark.png" class="icon-cross" alt="Close Menu">
                </div>
4

1 に答える 1

1

スクリプトを簡素化するためにできること:

$(function(){
    function updateMenu(){

        // all logic in here for checking width and show/hide/set classes

    }

    updateMenu();  // runs on doc ready

    $(window).on("resize", updateMenu);
}
于 2016-04-14T17:10:33.260 に答える