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

Question

我的 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;
    } 
}

要为特定屏幕或窗口调整大小的此菜单添加一些动画，我的 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

});