Question

我是新来的，所以我首先想借此机会自我介绍并向大家问好。：）

问题
我没有使用jQuery下拉菜单插件，而是尝试编写自己的小jQuery脚本，但对于我的生活，我似乎无法初始化它。

我的目标是使用名为wpc-menu-mobile的类来切换/附加wpc-menu类。当我手动添加新类时，一切看起来都很好，让我相信这是我的HTML和/或jQuery的问题。

如果有人能指导我朝着正确的方向前进，我会非常感激你的时间。

请参阅下面列出的HTML和jQuery代码。

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Test</title>
    <link href='css/style.css' media='all' rel='stylesheet' type='text/css'>
    <link href='css/font-awesome.min.css' media='all' rel='stylesheet' type='text/css'>
</head>
<body>
    <div>
        <nav class="main-navigation">
            <div class="container">
                <div id="nav-toggle">
                    <i class="fa fa-bars"></i>
                </div>
                <ul class="wpc-menu">
                    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-698" id="menu-item-698">
                        <a href="index.html">Home</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-699" id="menu-item-699">
                        <a href="scaffolding.html">Scaffolding</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-696" id="menu-item-696">
                        <a href="design.html">Design</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-696" id="menu-item-696">
                        <a href="health-and-safety.html">Health &amp; Safety</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-696" id="menu-item-696">
                        <a href="blog.html">Blog</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-696" id="menu-item-696">
                        <a href="about-us.html">About Us</a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-697" id="menu-item-697">
                        <a href="contact.html">Contact Us</a>
                    </li>
                </ul>
                <div class="nav-social" style="margin-left: 2em">
                    <a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a> <a href="https://www.facebook.com/All-Aspects-Scaffolding-160975444254259/" target=
                    "_blank" title="Facebook"><i class="fa fa-facebook-official"></i></a> <a href="http://www.linkedin.com/" target="_blank" title=
                    "Linkedin"><i class="fa fa-linkedin-square"></i></a> <a href="https://plus.google.com/103376540762389269428/about" target="_blank" title="Google Plus"><i class=
                    "fa fa-google-plus"></i></a>
                </div>
            </div>
        </nav>
        <div class="clear"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src='js/nav.js' type='text/javascript'></script> 
</body>
</html>

jQuery（nav.js）

jQuery(document).ready(function() {
    "use strict";
    /**
     * Initialise Menu Toggle
     */
    (function() {
        jQuery('.wpc-menu li.menu-item-has-children').each(function() {
            jQuery().prepend('<div class="nav-toggle-subarrow"><i class="fa fa-angle-down"></i></div>');
        });
        jQuery('#nav-toggle').click(function() {
            jQuery('.wpc-menu').addClass('wpc-menu-mobile');
            if (jQuery().hasClass('nav-toggle-active')) {
                jQuery().removeClass('nav-toggle-active');
            } else {
                jQuery().addClass('nav-toggle-active');
            }
        });
        jQuery('.nav-toggle-subarrow, .nav-toggle-subarrow .nav-toggle-subarrow').click(function() {
            jQuery().parent().toggleClass("nav-toggle-dropdown");
        });
    });
})
();

jQuery下拉菜单未初始化

0 个答案: