Question

当浏览器隧道传输到低于750px时，我试图显示和隐藏整个侧边菜单栏（#menu_links）。

当您点击＆＃34;＃menu_button＆＃34;时，有人知道为什么侧边菜单栏（#menu_links）没有被浏览器传递边缘而被隐藏当浏览器大小小于750？

https://menusel-169ba.firebaseapp.com/

$(document).ready(function () {

    $('#menu_links').css({ width: '50px' });
    $('.collapse-menu').addClass('hidden');

    $('ul#menu_links li').hover(function () {
        $('span', this).addClass('show');
        $('span', this).removeClass('hidden');
    }, function () {
        $('span', this).addClass('hidden');
        $('span', this).removeClass('show');
    });


  // Muesrta panel de CAMBIAR CONTRASEÑA
    $('a.test').on("click", function (e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });


    var timesClicked = 0;
    $("#menu_button").click(function () {
        timesClicked++
        if (timesClicked % 2 == 0) {
            $('#menu_links').animate({ width: '50px' }, 350);
            $('.collapse-menu').removeClass('show');
            $('.collapse-menu').addClass('hidden');

            $('ul#menu_links li').hover(function () {
                $('span', this).addClass('show');
                $('span', this).removeClass('hidden');
            }, function () {
                $('span', this).addClass('hidden');
                $('span', this).removeClass('show');
            });
        } else {
            $('#menu_links').animate({ width: '200px' }, 350);
            $('.collapse-menu').addClass('show');
            $('.collapse-menu').removeClass('hidden');

            $('ul#menu_links li').hover(function () {
            }, function () {
                $('span', this).addClass('show');
                $('span', this).removeClass('hidden');
            });
        }
        console.log(timesClicked % 2);
    });


    var menu_buttonVar = document.querySelector("#menu_button"),
        menu_linksVar = document.querySelector("#menu_links");


    // checkWidth() BREACK-POINTS
    function checkWidth() {
        var windowSize = $(window).width();

        if (windowSize <= 750) {
            console.log("screen width is less than 480");
            menu_linksVar.style.left = "-50px";


            $('#menu_button').click(function () {
                $('#menu_links').animate({
                    left: '0px',
                }, 0);
            });
        } // END if

        else {
            console.log("screen width is greater than or equal to 960");
            menu_linksVar.style.left = "0px";
        }
    };

    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
}); // END documentReady

Answer 1

现在我的菜单已经准备好了，它运行正常。下一步是合成代码以使用相同的函数但字符更少。

这是链接：

https://menusel-169ba.firebaseapp.com/

谢谢。

菜单 - 左边有jquery

1 个答案: