ワードプレスのサブメニューの表示/非表示

Question

私は、これに専念するたくさんのページがあることを知っていますが、私のコードはうまく動作していないようです。私は "Uncaught 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

あなたは確認する必要があります：

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を入力して、クロムコンソールでこれをテストすることができ、あなたが持っているなど、出力する必要があります

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

2.- WordPressに含まれているjQueryを使用している場合は、$の代わりにjQueryを使用する必要があります。他のライブラリとの競合を避けるために前述したように。

3-それ以外の場合は、文書がreadyであるとすぐにコードが実行され、DOM要素が文書にある前にコードを実行できなければ実行されます。

Answer 2

jQueryを正しくインポートしていますか？これをヘッダーに追加しない場合。

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

それはまた、あなたのスクリプトの先頭に$ = jQueryのを追加するトリックを行うかどうかを確認しようとすることができる問題ではない場合。