Question

在移动视图（窗口大小小于800像素）中，默认情况下，下拉菜单现在处于打开状态并覆盖了内容。我希望在单击切换按钮之前隐藏菜单。

网站：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

在slideToggle（）的jQuery文档中，它说：“如果最初显示该元素，则将其隐藏；如果隐藏，则将其显示。”

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

Answer 2

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

    public override string ToString()
    {
        return $"[{Cards.Select(a => a.ToString()).Aggregate((b, c) => $"{b}, {c}")}]";
    }

尝试删除@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;行，看看它是否固定。

希望这会有所帮助。

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

2 个答案: