时间戳

首页 > 解决方案 > 想防止下拉菜单默认打开

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

问题描述

在移动端视图（窗口大小小于 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 -->

标签： javascriptjquery

解决方案

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

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

推荐阅读