jquery - jqueryを使用したワードプレステーマのレスポンシブメニュー

Question

正しく機能しているワードプレステーマの垂直ナビゲーションメニューがあります。私のテーマは、css3メディアクエリを使用してレスポンシブです。画面サイズ768x1024（ポートレートモード）の1レベルのサブメニューを使用したナビゲーションのメディアクエリは次のとおりです。

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

    .nav {
      display: block;
      width: 280px;
      margin: 0 auto;
     }

    .nav > li > a {
      display: block;
      padding: 16px 18px;
      font-size: 1.3em;
      color: #d4d4d4;
      text-decoration: none;
      background-color: #343434;
     }

    .nav > li > a:hover, .nav > li > a.open {
      color: #e9e9e9;
      border-bottom-color: #384f76;
      background-color: #6985b5;
     }

    .nav li ul {display:none; background: #FF0000; }

    .nav li ul li a {
      display: block;
      background: none;
      padding: 10px 0px;
      padding-left: 30px;
      font-size: 1.1em;
      text-decoration: none;
      color: #e3e7f1;
      }

    .nav li ul li a:hover {
      background: #394963;
    } 
}

特定の画面またはウィンドウのサイズ変更のためにこのメニューのアニメーションを追加するには、次のようにjqueryを使用します。

 <script type="text/javascript">

  $(document).ready(function() {
    var myscreen = document.body.clientWidth;
    responsiveMenu();
})

$(window).bind('resize orientationchange', function() {
    myscreen = document.body.clientWidth;
    responsiveMenu();
});

var responsiveMenu = function() {
     if (myscreen < 768) {
     $(".v_nav > li > a").on("mouseover", function(e){
     if($(this).parent().has("ul")) {
      e.preventDefault();
      }

    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $(".v_nav li ul").slideUp(350);
      $(".v_nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }

    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });

 }
}

 </script>

これを使用して、最初のレベルのみのポートレート画面のナビゲーションを取得しており、サブメニューのスライドダウンアニメーションはありません。Firebugスローエラー $(".v_nav > li > a").on is not a function。私の問題を解決するのを手伝ってください

Answer 1

これを試して

 $(".v_nav > li > a").mouseover(function() {

     //.... Your Code

});