Question

我正在使用this site中的代码制作下拉菜单。它提供了一些jQuery代码。我认为这是在关闭正文标记之前添加到HTML文件中的。然后，我在计算机上的浏览器中进行测试，但它无法正常工作 - 汉堡包图标无法点击

我在这里创建了一个JS小提琴http://jsfiddle.net/2jp93xo5/

这是我的HTML文件

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel=stylesheet href="css/master.css">

</head>

<body>
            <div class="mobile-nav">
                <div class="menu-btn" id="menu-btn">
                    <div></div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                <div class="responsive-menu">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about-us.html">About</a></li>
                        <li><a href="our-services.html">Services</a></li>
                        <li><a href="our-services.html">FAQs</a></li>
                        <li><a href="our-services.html">Work</a></li>
                        <li><a href="contact-us.html">Contact</a></li>
                    </ul>
                </div>
            </div>
    <script type="text/javascript">
        jQuery(function($){
            $( '.menu-btn' ).click(function(){
                $('.responsive-menu').addClass('expand')
                $('.menu-btn').addClass('btn-none')
            })

             $( '.close-btn' ).click(function(){
                $('.responsive-menu').removeClass('expand')
                $('.menu-btn').removeClass('btn-none')
            })
        })
    </script>

    <script type="text/javascript">
        jQuery(function($){
                 $( '.menu-btn' ).click(function(){
                 $('.responsive-menu').toggleClass('expand')
                 })
            })
    </script>

</body>
</html>

Answer 1

When you use functions from an external library, such as jQuery, you need to tell the browser to load those functions. If all you did was copy and paste the code from the linked article, then "not working" is the expected behavior because that code would have an unfulfilled dependency.

References to external JavaScript libraries are usually added to HTML files using script tags.

The HTML Script Element () is used to embed or reference an executable script within an HTML or XHTML document.

Script tags look like:

<script src="path/file.js"></script>

If you want to use a function referenced in a script tag the script tag needs to appear before you call the function. It's worth noting that script tags are only one of the mechanisms that can be used to reference external dependencies, although it is the simplest and probably the only one you should worry about for now.

You can run jquery locally or on a server. A popular choice is to use a CDN-hosted jQuery reference, because (a) it will often already be cached by clients; and (b) it reduces load on your server. You can reference a local file from your local server. Or, if you have an internet connection available to your local environment you can just plugin the script tag to reference the CDN-hosted jQuery and include it above the other JavaScript code. That might look like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

A good way to test out pieces of code like in the article you cited are sites like jsfiddle, that provide an online execution environment and allows code-free options for including certain dependencies and other configuration options.

Update

I took a look at your fiddle. The JavaScript was malformed and referenced non-existent elements. I cleaned it up and moved the reference to jQuery to load onDomReady via the Framework & Extensions tab on the top left. The menu now expands and contracts at: http://jsfiddle.net/2jp93xo5/2/ . Based on the initial version, I would suggest reviewing JavaScript syntax for basic language constructs. It will make it a lot easier to understand what's wrong with code when you have a clear picture of what valid code looks like. Also, to be clear: Script tags are HTML elements. They are not a JavaScript construct. They are used within an HTML document to reference external JavaScript documents, but are invalid as JavaScript syntax.

Answer 2

Javascript is included with all the browsers I know, and activated by default. It is a client-side language so you juste need a client to test (your browser).

You need to include the jquery library, which come in the form of a .js file. You can download it or simply call the one from a CDN like google :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

As for where to put your code, there are several responses. I think the easiest one for testing is to put your script tags just before the end tag.

Note that to use jquery, your code must be placed after the jquery call. So to sum up, you can write:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        // your code
    </script>
</body>

You can view javascript errors in the console of your browser (Chrome, Firefox and even IE come with one). Just hit F12 and search for "console", here it should log the errors.

JQuery基本问题

2 个答案:

Update