Javascript 用jquery留下的菜单

当浏览器被隧道传输到小于750px时，我试图通过切换整个侧菜单栏（#菜单链接）来显示和隐藏

有人知道为什么当浏览器大小小于750时，当您单击“#菜单按钮”时，侧菜单栏（#菜单链接）不会通过浏览器边缘隐藏吗

$（文档）.ready（函数（）{
$（'#菜单链接'）.css（{width:'50px'}）；
$（'.collapse menu'）.addClass（'hidden'）；
$（'ul#菜单链接li'）。悬停（函数（）{
$（'span'，this.addClass（'show'）；
$（'span'，this.removeClass（'hidden'）；
}，函数（）{
$（'span'，this.addClass（'hidden'）；
$（'span'，this.removeClass（'show'）；
});
//柬埔寨合同仲裁委员会
$（'a.test'）。在（“单击”，函数（e）{
$（this.next（'ul'）.toggle（）；
e、 停止传播（）；
e、 预防默认值（）；
});
var=0；
$（“#菜单按钮”）。单击（功能（）{
点击时间++
如果（单击%2==0）{
$（'#菜单链接'）。动画（{width:'50px'}，350）；
$（'.collapse menu'）.removeClass（'show'）；
$（'.collapse menu'）.addClass（'hidden'）；
$（'ul#菜单链接li'）。悬停（函数（）{
$（'span'，this.addClass（'show'）；
$（'span'，this.removeClass（'hidden'）；
}，函数（）{
$（'span'，this.addClass（'hidden'）；
$（'span'，this.removeClass（'show'）；
});
}否则{
$（'#菜单链接'）。动画（{width:'200px'}，350）；
$（'.collapse menu'）.addClass（'show'）；
$（'.collapse menu'）.removeClass（'hidden'）；
$（'ul#菜单链接li'）。悬停（函数（）{
}，函数（）{
$（'span'，this.addClass（'show'）；
$（'span'，this.removeClass（'hidden'）；
});
}
console.log（单击%2）；
});
var menu_buttonVar=document.querySelector（“菜单按钮”），
menu_linksVar=document.querySelector（“menu_links”）；
//checkWidth（）break-POINTS
函数checkWidth（）{
var windowSize=$（window.width（）；
如果（windowSize现在我的菜单已经准备好了，可以正常工作了。
下一步是合成代码以使用相同的函数，但使用较少的字符

以下是链接：


谢谢。
做你的类
。show
和
在css中隐藏的
分别有
显示：auto
和
显示：none
吗？为了测试起见，请尝试
.show（）
和
隐藏（）
。这是bootstrao类，但我认为所有这些都是关于JS的。在这种情况下，你可以创建一个提琴吗？因为这是你共享的所有JS代码。好的，对不起：我建议使用CSS
transform:translateX（）
或
transform:translate3d（）
来制作动画，只需查看画布外的菜单即可。
$(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