Question

当我将我的网站转换为WordPress时，我意识到我的响应式菜单已停止正常工作。 ul不是隐藏菜单并显示应切换菜单的汉堡按钮，而是始终可见，并且似乎不受任何jquery代码的影响。有人会碰巧根据如何纠正这一点吗？提前感谢大家的关注。

HTML：

<nav>
  <a href="#" id="burger_menu"><i class="fa fa-bars"></i></a>
  <?php
    wp_nav_menu(array(
      'theme_location'  => 'primary',
      'container'       => 'div'
    ));
  ?>
</nav>

CSS：

header nav #burger_menu {
  padding-right: 20px;
  font-size: 40px;
  display: none;
  color: #fff;
}

header nav .menu ul {
  display: block;
  line-height: 0;
}

header nav .menu ul li {
  padding: 10px;
  display: inline-block !important;
  float: left;
}

@media screen and (max-width: 1023px) {
  /* NAV */
  header nav #burger_menu {
    display: inline-block;
  }

  header nav ul {
    background: rgba(98,194,210,0.85) !important;
    line-height: 10px !important;
  }

  header nav ul,
  nav:active ul {
    display: none !important;
    position: absolute;
    padding: 20px 40px;
    background: #62c2d2;
    right: 0;
    top: 80px;
    width: 30%;
  }
}

jQuery的：

//RESPONSIVE NAV
$('#burger_menu').on('click', function(e) {
  e.preventDefault();
  $('header ul').toggle();
  $('header ul').mouseleave(function() {
    $('header ul').css('display', 'none !important');
  });
});

Answer 1

你绑定click event两次，其中第一个用于显示，第二个用于隐藏菜单，所以当你点击链接时它会显示然后立即隐藏所以尝试使用toggle()之类的，

//RESPONSIVE MENU
$('#burger_menu').on('click', function(e) {
    e.preventDefault();
    $('header nav .menu ul').toggle();
}

Answer 2

看起来您使用的是错误的媒体查询。找一个较小屏幕的媒体查询，或者只是使用一个？

@media screen and (max-width: 1023px)

同时将px更改为％。

如果您可以发布网址或开发网址，我可能会更有帮助。

响应式菜单无法在WordPress上运行

2 个答案: