在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中顯示/隱藏子菜單

回答

相關問題