Bootstrap v5 wp-bootstrap-navwalker 下拉导航栏不起作用 引导程序 5.0.0 [ 2021 ]修复汉堡图标下拉菜单

如何解决Bootstrap v5 wp-bootstrap-navwalker 下拉导航栏不起作用 引导程序 5.0.0 [ 2021 ]修复汉堡图标下拉菜单

我使用 Bootstrap v5 和 [wp-bootstrap-navwalker][1]

在 function.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://www.chartjs.org/docs/3.0.0-alpha/developers/api.html

解决方法

引导程序 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 已经在使用新的导航栏元素。但是如果你们中的任何一个使用旧的并且只更新了上面的功能，那么请按照以下步骤操作。

在响应中，如果您使用旧类，汉堡图标将不起作用。您还必须将 data-toggle 更新为 data-bs-toggle

<button ... data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" ...>
    <!-- span -->
</button>