在Wordpress中顯示/隱藏子菜單

Question

我知道有很多關於SO的頁面，但是我的代碼似乎不起作用。 我不斷收到“ Uncaught ReferenceError：未定義$”。 當用戶將鼠標懸停在父級上時，我使用了jquery來顯示/隱藏我的wordpress子菜單。 （請參見下面的代碼）

Java腳本

 <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.-您可以在chrome控制台上通過在控制台中輸入$或jQuery進行測試，並且應該具有以下輸出：

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

2.-如果您使用的是WordPress隨附的jQuery，則需要使用jQuery而不是前面提到的$ ，以避免與其他庫沖突。

3.-因為否則否則代碼將在文檔ready立即執行；如果沒有，則可以在DOM元素在文檔上之前執行您的代碼。