Question

我使用Understrap入门主题创建具有滚动和平滑滚动功能的单页滚动站点。

我希望导航栏在较小的屏幕下拉菜单中单击时自动关闭，但是在单击时导航栏保持打开状态。 id通常向每个导航项添加数据切换和数据目标属性。像这样：-

<div id="navbarNavDropdown" class="collapse navbar-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target="#navbarNavDropdown">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target="#navbarNavDropdown">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target="#navbarNavDropdown">Portfolio</a></li>
  </ul>
</div>

因为您在WP管理区域中添加了菜单项，所以我尝试添加以下属性：-

function add_specific_menu_location_atts( $atts, $item, $args ) {
  // check if the item is in the primary menu
  if( $args->theme_location == 'primary' ) {
  // add the desired attributes:
  $atts['data-toggle'] = 'collapse';
  $atts['data-target'] = '#navbarNavDropdown';
  }
  return $atts;
  }
  add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );

这些属性附加在浏览器输出中，但导航栏没有切换，而且在应用此功能之后，它使我所有的导航栏锚点标签都具有链接活动的scrollspy状态，因此所有突出显示为蓝色。

请帮助谢谢

Bootstrap 4，如何在单击时自动关闭响应式导航栏

0 个答案: