wordpress - 悬停时的 WP Bootstrap 菜单下拉菜单
问题描述
我的 Wordpress (bootstrap) 导航菜单添加如下:
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav mx-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 3,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>
如何让它在悬停时展开下拉菜单而不是点击?
谢谢
编辑:添加了生成的 html
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<div id="navbarNavDropdown" class="collapse navbar-collapse"><ul id="main-menu" class="navbar-nav mx-auto"><li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item menu-item-7"><a title="Home" href="http://wp-ppp:8888/w/" class="nav-link">Home</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-34"><a title="About us" href="http://wp-ppp:8888/w/about-us/" class="nav-link">About us</a></li>
<li id="menu-item-126" class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-126"><a title="What's on" href="http://wp-ppp:8888/w/events/" class="nav-link">What’s on</a></li>
<li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-284"><a title="Rider" href="http://wp-ppp:8888/w/ridehq/" class="nav-link">Rider</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-33"><a title="Join the club" href="http://wp-ppp:8888/w/join-the-club/" class="nav-link">Join the club</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-35"><a title="Youth" href="http://wp-ppp:8888/w/youth/" class="nav-link">Youth</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-36 dropdown"><a title="Adults" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Adults <span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-87"><a title="Sunday Morning Rides" href="http://wp-ppp:8888/w/sunday-morning-rides/" class="nav-link">Sunday Morning Rides</a></li>
<li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-242"><a title="Competitive" href="http://wp-ppp:8888/w/competitive/" class="nav-link">Competitive</a></li>
</ul>
</li>
</ul></div> </div><!-- .container -->
解决方案
推荐阅读
- django - Django-rest-framework 读取 url 数据
- java - 这是声明指针的正确方法吗
- javascript - JS - 一键提交多个表单
- terraform - Terraform:使用 Terraform 一次标记所有谷歌计算实例
- android - 拆分视图中的 Android Studio 和模拟器
- python - 如何为 DASH Plotly 应用程序实现 LDAP 身份验证?
- javascript - 如何根据屏幕大小使 div 位于另一个 div 下方
- azure-active-directory - 使用 AAD 令牌保护 .Net Core 3 Web API
- .net - 如何在 Windows 桌面应用程序中隐藏 API 发布 URL?
- python - 如何修复:Pytest“创建测试”对话框不会在 Pycharm 中打开