javascript - jquery 响应式菜单

Question

我已经创建了一个导航(我的第一个更大的脚本 - 我正在学习)。我在谷歌上找不到任何可以帮助我的东西。

我会在桌面和移动设备上使用。

在桌面上它可以工作，如果我调整桌面宽度，它会更改为移动版本。如果我在移动设备上显示，我只有桌面版本。

http://www.kcserver.info/testarea/video2brain/nav/kreativ-nav/nav.html

Javascript

<小时/>

// Navigation Script

$(function () {

    // Reload the Script after Resize of the Window 
    $(window).bind('resize', function (e) {
        if (window.RT) clearTimeout(window.RT);
        window.RT = setTimeout(function () {
            this.location.reload(false); /* false to get page from cache */
        }, 200);

    });

    // end Reload of the script

    $(window).load(function () {
        // Cache the elements we'll need
        var menu = $('#nav-bar');
        var menuList = menu.find('ul:first');
        var listItems = menu.find('li').not('#responsive-menu');

        // Create responsive Menu Version 4Version 4
        menuList.prepend('<li id="responsive-menu"><a href="#">Menu</a></li>'); // here you can change the text of the repsonsive Menu

        // show the responsiv menu links
        menu.on('click', '#responsive-menu', function () {
            listItems.slideToggle();
            listItems.addClass('collapsed');
        });
    });
});


// Now the schript change  from Desktop to responsive by 681 px. You can change this value. Dont forget to change the mediaqueries in the nav.css File
$(function () {
    //
    if ($(window).width() > 681) {
        $("ul#menu li ul li:has(ul)").find("a:first").addClass("active");
        $("ul#menu li").hover(function () {

            $(this).addClass("hover");
            $('ul:first', this).css('visibility', 'visible');
            $(this).children('ul').delay(20).slideDown(300); // speed of the slide

        }, function () {
            $(this).removeClass("hover");
            $('ul:first', this).css('visibility', 'hidden');
            $(this).children('ul').delay(20).slideUp(200); // speed of the slide
        });
    } else {
        $("ul#menu li ul li:has(ul)").find("a:first").addClass("subnav");
        var $mobil = $("ul#menu li ");
        $mobil.children("ul").css("display", "none");
        $mobil.filter(":has(ul)").children(":first-child").click(function () {
            $(this).next().slideToggle(); // animation to sho teh menu
            //$(this).parent().siblings().children("ul:visible").slideUp();  // activate this if you will sho only 1 activ Menupoint
            $(this).parent().removeClass('closed');

        });
    }
});

//

$(window).resize(function () {
    if ($('body').width() < 960) {
        console.log("Less than 960");

    } else {
        console.log("More than 960");
    }
});

Answer 1

我猜，你的问题在于你的 HTML 构造，而不是 JS 脚本。

你添加了吗

<meta name="viewport" content="width=device-width, initial-scale=1.0">

到你的标题？

更多信息: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag