Question

我知道有很多专门用于此的页面，但我的代码似乎不起作用。我一直得到一个“未捕获的ReferenceError：$未定义”。当用户将鼠标悬停在父级上方时，我已经使用jquery来显示/隐藏我的wordpress子菜单。（见下面的代码）

的Javascript

 <script type="text/javascript">
$('.menu .nav li > .sub-menu').parent().hover(function() {
 var submenu = $(this).children('.sub-menu');
 if ( $(submenu).is(':hidden') ) {
 $(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
 }
});

HTML

    <div id="masthead" class="menu navbar navbar" role="banner">
    <div class="logo-navbar container-logo">
        <div class="container-fullwidth">
            <div class="navbar-header">
        <div class="menu-left-container"><ul id="menu-left" class="nav navbar-nav"><li id="menu-item-184" class="menu-item"><a href="#">Item 1</a></li>
       <li id="menu-item-239" class="menu-item">        <a href="#">Item 2</a>
      <ul class="sub-menu">
    <li id="menu-item-238" class="menu-item"><a href="#">Sub-Item 1</a></li>
    <li id="menu-item-237" class="menu-item"><a href="#">Sub-Item 2</a></li>
    <li id="menu-item-240" class="menu-item"><a href="#">Sub-Item 3</a></li>
    <li id="menu-item-241" class="menu-item"><a href="#">Sub-Item 4</a></li>
</ul>
</li>
</ul></div><a href="#" class="navbar-brand">
                <img src="logo.png">
        </a>
      <div class="menu-right-container"><ul id="menu-right" class="nav navbar-nav"><li id="menu-item"><a href="#">Item 3 Illustrations</a></li>
    <li id="menu-item-189" class="menu-item"><a href="#">Item 4</a></li>
    </ul>
    </div>                
            </div>
        </div>
          </div>

我想我没有引用正确的功能。希望有人帮助我！

干杯！

Answer 1

您是否正确导入jQuery？如果不将其添加到标题中。

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

如果这不是问题，您还可以尝试查看在脚本顶部添加$ = jQuery是否有效。

Answer 2

您需要确保：

1.-您已在页面的页眉/页脚中包含jQuery 2.-如果您使用WordPress中的原生jQuery被定义为jQuery而不是$。
3.-您应该将代码包装在$(document).ready函数中。

示例：

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $('.menu .nav li > .sub-menu').parent().hover(function() {
            var submenu = $(this).children('.sub-menu');
            if ( $(submenu).is(':hidden') ) {
                $(submenu).slideDown(200);
            } else {
                $(submenu).slideUp(200);
            }
        });
    });
})( jQuery );
</script>

原因：

1.-您可以通过在控制台中键入$或jQuery在Chrome控制台上对此进行测试，您应该输出如下内容：

function (a,b){return new e.fn.init(a,b,h)}

2.-如果您使用WordPress包含的jQuery，则需要使用前面提到的jQuery而不是$，以避免与其他lib冲突。

3.-否则，只要文档为ready，代码就会被执行，否则您的代码可以在文档上DOM元素之前执行。

在wordpress中显示/隐藏子菜单

2 个答案: