在wordpress中显示/隐藏子菜单

我知道有很多页面专门用于此目的，但我的一段代码似乎不起作用。我不断收到“Uncaught ReferenceError：$未定义”。当用户将鼠标悬停在父项上时，我使用jquery显示/隐藏了我的wordpress子菜单。（请参见下面的代码）在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>

我想我不是引用正确的函数。希望有人帮助我！

干杯！

来源

2016-04-05 S.ko

@S .ko你可以提供像codepen或其他请现场演示吗？ – HenryDev

你需要确保：

1.-您已经包括jQuery的在你的页面的页眉/页脚。
2.-如果您使用的是本机jQuery，则WordPress定义为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铬控制台上测试这一点，你应该有输出，如：

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

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

3.-因为否则只要文档为ready就执行代码，如果不是，则可以在DOM元素位于文档上之前执行代码。

来源

2016-04-05 03:43:29

这是非常好的建议。像魅力一样工作。似乎我忘了“$（document）.ready（function（）”。谢谢！ –

您是否正确导入jQuery？如果没有添加到标题。

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

如果不是你也可以尝试看看，如果加上$ = jQuery来你的脚本的顶部是卓有成效的问题。

来源

2016-04-05 03:43:00 phelpsiv

在wordpress中显示/隐藏子菜单

回答

相关问题