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>

使用这个我只能获得第一级的纵向导航导航，并且没有子菜单向下滑动动画。萤火虫投掷错误$(".v_nav > li > a").on is not a function。帮我解决我的问题

Answer 1

试试这个

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

     //.... Your Code

});

在使用jquery的wordpress主题的敏感菜单

1 个答案: