javascript - 想要阻止默认打开下拉菜单

Question

在移动 View (窗口大小小于800px)中，下拉菜单现在默认打开并覆盖内容。我希望隐藏菜单，直到单击切换按钮。

网站:jweeklyusa.com

说实话，我会写html和css，但我对javascript了解不多。如果您能帮助我，我真的很感激。谢谢。

/* Add Menu Toggle Button for mobile navigation */
$("#main-navigation").before('<button id=\"main-navigation-toggle\" class=\"main-navigation-toggle\"></button>');

/* Add dropdown slide animation for mobile devices */
$('#main-navigation-toggle').on('click', function(){
  menu_wrap.slideToggle();
  $( this ).toggleClass('active');
});

/* Add submenus for mobile navigation menu */
main_menu.addMobileSubmenu();
header_menu.addMobileSubmenu();

} );

<nav id="main-navigation" class="primary-navigation navigation clearfix" role="navigation">
<div class="main-navigation-menu-wrap">

  <?php
    // Display Main Navigation.
    wp_nav_menu( array(
      'theme_location' => 'primary',
      'container' => false,
      'menu_class' => 'main-navigation-menu',
      'echo' => true,
      'fallback_cb' => 'admiral_default_menu',
      )
    );
  ?>
</div><!-- main-navigation-menu-wrap -->
</nav><!-- #main-navigation -->

Answer 1

使用 Chrome 检查器，您的 CSS 中似乎有 2 个显示元素:

@media only screen and (max-width: 720px)
.main-navigation-menu-wrap

    display: none;
    float: left;
    width: 100%;
    border-top: 0px solid #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

尝试删除 display: flex; 行并查看是否已修复。

希望这有帮助。