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

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

    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;行，看看它是否已修复。

希望这可以帮助。

Answer 2

在slideToggle() 的jQuery 文档中，它说“如果元素最初显示，它将被隐藏；如果隐藏，它将被显示。”

看起来您最初将 CSS 显示设置为“无”。最初尝试删除该属性。