想要防止下拉菜单默认打开

Question

在移动视图中（窗口大小小于 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&nbsp; &nbsp; display: none;&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; border-top: 0px solid #ffffff;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; align-items: flex-start;&nbsp; &nbsp; justify-content: flex-start;尝试删除该display: flex;行，看看它是否已修复。希望这可以帮助。

Answer 2

在slideToggle() 的jQuery 文档中，它说“如果元素最初显示，它将被隐藏；如果隐藏，它将被显示。”看起来您最初将 CSS 显示设置为“无”。最初尝试删除该属性。