Jquery隐藏菜单没有执行

Question

我正在创建一个响应式网站，当您点击它时只需要在移动设备上打开一个菜单。我正在使用我在Stackoverflow上找到的代码。 我试图在这里运行的Jquery没有执行：

代码：

//© Nettium
//Code from http://jsfiddle.net/zKF5m/2/

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
$(document).ready(function() {
var pageWidth = $(window).width();
var body= document.getElementsByTagName(‘body’)[0];
var script= document.createElement(‘script’);
script.type= ‘text/javascript’;
if (pageWidth > 1024) {
    $(function(){
        $("#menu").menu();    //jQueryUI method that shows the <ul> as a menu.
        $("#menu").hide();
    });
    
    $(function(){
        $("#menubar").click(function(){    //shows the menu when clicker.
            $("#menu").show(); //it is here that we make the menu behave as a drop-down menu. Or else it will be visible at all times.
        });
    });
    
    $(function(){
        $("#menubar").mouseleave(function(){    //mouseleave fires only when the mouse pointer leaves all the child elements also. This is needed because we need the menu to be shown while the pointer is ON the menu.
            $("#menu").slideUp("fast");
            $("#menubar").blur();
        });
    });
    
    $(function(){
        $("a").click(function(){    //this is the piece of code that closes the menu after an item is clicked.
            $("#menu").slideUp("fast");
            $("#menubar").blur();
        });
    });
}
else{

};
body.appendChild(script);
});

/* © Nettium */

/* Menu bar desktop */
@media only screen and (min-device-width: 481px) {
    
    /* Logo li */
    div#menubar ul#menu a#menulogo li#menulogo {
        pointer-events: none;
        height: 50px;
        display: inline-block;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #333333;
        line-height: 50px;
        vertical-align: 50%;
    }
    
    /* Logo image */
    div#menubar ul#menu a#menulogo img#menulogo {
        height: 11.5px;
        width: 70px;
        display: inline-block;
    }
    
    /* Bar */
    div#menubar ul#menu {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: #333333;
        top: 0px;
        float: left;
        position: fixed;
        z-index: 10
        padding: 0;
    }
    
    /* Buttons */
    div#menubar ul#menu li.menuitem {
        background-color: #333333;
        opacity: 1;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Buttons hover */
    div#menubar ul#menu li.menuitem:hover {
        background-color: #474747;
    }
    
    /* Buttons selected */
    div#menubar ul#menu li.menuitem:selected {
        background-color: #474747;
    }
    
    /* All buttons */
    div#menubar ul#menu li {
        height: 50px;
        margin: auto;
        float: left;
        -webkit-transition: background-color 0.5s ease-out;
        -moz-transition: background-color 0.5s ease-out;
        -o-transition: background-color 0.5s ease-out;
        transition: background-color 0.5s ease-out;
    }
    
    /* All buttons a styling */
    div#menubar ul#menu a.menubutton {
        display: block;
        text-align: center;
    }
}

/* Menu bar mobile */
@media only screen and (max-device-width: 480px) {
    
    /* Logo li */
    div#menubar ul#menu a#menulogo li#menulogo {
        pointer-events: none;
        background-color: #333333;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    /* Logo image */
    div#menubar ul#menu a#menulogo img#menulogo {
        height: 11.5px;
        display: inline-block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Bar */
    div#menubar ul#menu {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        background-color: #333333;
        top: 0px;
        position: fixed;
        z-index: 10;
        padding: 0;
        text-align: center;
    }
    
    /* Buttons */
    div#menubar ul#menu li.menuitem {
        background-color: #5B5B5B;
        opacity: 1;
        width: 100%;
        text-align: center;
    }
    
    /* Buttons hover */
    div#menubar ul#menu li.menuitem:hover {
        background-color: #474747;
        width: 100%;
    }
    
    /* Buttons selected */
    div#menubar ul#menu li.menuitem:selected {
        background-color: #474747;
        width: 100%;
    }
    
    /* All buttons */
    div#menubar ul#menu li {
        height: 50px;
        float: left;
        width: 100%;
    }
    
    /* All buttons a styling */
    div#menubar ul#menu a.menubutton {
        display: block;
        text-align: center;
    }
    
    /* Logo image */
    div#menubar ul#menu a#menulogo img#menulogo {
        height: 11.5px;
        width: 70px;
        display: block;
    }
}

/* Text styling */
    /* Menu text styling paragraph */
        div#menubar p.menutext {
            link-decoration: underline;
            color: #ffffff;
            font-family: "verdana",geneva,sans-serif;
            text-align: left;
            font-size: 16px;
            text-align: center;
        }
        
    /* Menu title styling paragraph */
        div#menubar p.menutitle {
            link-decoration: underline;
            color: #ffffff;
            font-family: "verdana",geneva,sans-serif;
            text-align: left;
            font-size: 24px;
            text-align: center;
        }

/* Other */
    /* Imports CSS3 */
    @import "compass/css3";

    /* Account button turned off (for future use). To turn on remove display: none */
    div#menubar li#account {
        display: none;
    }

<!DOCTYPE html>
<html >
<head>
    <!-- © Nettium -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bar/mbar/css/style.css">
    <title>
    <!-- Config include head -->
    <?php
        include "./config.php";
        echo $wname;
    ?>
    - Menu
    </title>
</head>
<body>
    <!-- Config include body-->
    <?php
        include 'config.php';
    ?>
    <!-- Jquery include -->
    <script src="mbar.js"></script>
    <!-- Menu -->
    <div id="menubar">
        <ul id="menu">
            <a href="#" id="menulogo">
                <li id="menulogo">
                    <img src="./style/logo.png" alt="<?php include "./config.php"; echo $name;?> Logo" id="menulogo">
                </li>
            </a>
            <a href="./page1" class="menubutton">
                <li class="menuitem">
                    <p class="menutext">Page 1</p>
                </li>
            </a>
            <a href="./page2" class="menubutton">
                <li class="menuitem">
                    <p class="menutext">Page 2</p>
                </li>
            </a>
            <a href="./page3" class="menubutton">
                <li class="menuitem">
                    <p class="menutext">Page 3</p>
                </li>
            </a>
            <a href="#" class="menuaccount">
                <li id="account">
                    <p class="menutext">Account name</p>
                </li>
            </a>
        </ul>
    </div>
</body>
</html>

我尝试在Firefox中以移动开发者模式查看它，但这不起作用，而且在我的手机上它也无法正常工作。我在Jquery没有很多经验，所以也许我没有看到什么。有什么问题？

Answer 1

如果菜单显示在大于1024px的屏幕上，您似乎只是打开菜单：

if (pageWidth > 1024) {
  ... keep the code inside this if - block, 
  remove the surrounding if - else ...
}
else
{
}

除非您的屏幕是＆gt;否则此代码不会执行1,024像素x

要更改此行为，请尝试删除if - else - block：

if{

并仅保留.container { display: flex; justify-content: center; align-items: center; } .box { flex: 1 1 auto; color: white; font-size: 50px; text-align: center; padding: 10px; } /* Colours for each box */ .box1 { background: #1abc9c; } .box2 { background: #3498db; } .box3 { background: #9b59b6; } - 语句中的内容。现在无论窗口宽度如何都会执行代码。