我使用 Bootstrap v5 和 [wp-bootstrap-navwalker][1]
在函数.php
<?php
require_once('class-wp-bootstrap-navwalker.php');
function main_menu(){
wp_nav_menu(array(
'theme_location' => 'main-menu',
'menu_class' => 'nav navbar-nav',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarSupportedContent',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
}
?>
在 header.php 中<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php main_menu() ?>
</div>
</nav>
下拉菜单不起作用[1]:https://github.com/wp-bootstrap/wp-bootstrap-navwalker
最佳答案
Bootstrap 5.0.0 [ 2021 ]
经过测试和工作✔
您可以使用此功能。这将更新 data-toggle
至data-bs-toggle
.
add_filter( 'nav_menu_link_attributes', 'bootstrap5_dropdown_fix' );
function bootstrap5_dropdown_fix( $atts ) {
if ( array_key_exists( 'data-toggle', $atts ) ) {
unset( $atts['data-toggle'] );
$atts['data-bs-toggle'] = 'dropdown';
}
return $atts;
}
来源:https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues/499修复汉堡图标下拉菜单
OP 已经在使用新的导航栏元素。但是,如果你们中的任何人使用旧的并且只更新了上面的功能,那么请按照以下步骤操作。
如果您使用旧类(class),汉堡图标将无法响应。您还必须从
data-toggle
更新您的至data-bs-toggle
<button ... data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" ...>
<!--span-->
</button>
关于javascript - Bootstrap v5 wp-bootstrap-navwalker 下拉导航栏不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65546253/