使用jquery的wordpress主题中的响应菜单

我有wordpress主题的垂直导航菜单，它工作正常。我的主题使用css3媒体查询进行响应。使用屏幕尺寸为768 x 1024（纵向模式）的一级子菜单进行导航的媒体查询如下：

@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;
    } 
}

 <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>

要为特定屏幕或窗口大小调整菜单添加一些动画，我的jquery如下所示：

@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;
    } 
}

 <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>

$（文档）.ready（函数（）{
var myscreen=document.body.clientWidth；
响应菜单（）；
})
$（窗口）.bind（'resize orientationchange'，function（）{
myscreen=document.body.clientWidth；
响应菜单（）；
});
变量响应菜单=函数（）{
如果（我的屏幕<768）{
$（.v_nav>li>a”）.on（“鼠标悬停”，函数（e）{
如果（$（this.parent（）.has（“ul”））{
e、 预防默认值（）；
}
if（！$（this）.hasClass（“打开”））{
//隐藏所有打开的菜单并删除所有其他类
美元（350美元）；
$（“.v_nav li a”）.removeClass（“开放”）；
//打开我们的新菜单并添加开放类
$（this.next（“ul”）。向下滑动（350）；
$（此）.addClass（“打开”）；
}
else if（$（this）.hasClass（“打开”））{
$（此）.removeClass（“打开”）；
$（本）.next（“ul”）.slideUp（350）；
}
});
}
}

使用这一点，我得到了我的纵向屏幕导航与第一级只有，并没有子菜单下滑动画。Firebug抛出错误

$（“.v_nav>li>a”）。on不是函数。帮我解决我的问题试试这个

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

     //.... Your Code

});