Bootstrap 4, как автоматически закрывать отзывчивую навигационную панель при нажатии

Question

Я использую стартовую тему Understrap, чтобы сделать прокрутку на одной странице с прокруткой и плавной прокруткой.

Я бы хотел, чтобы панель навигации при меньшем размере экрана автоматически закрывалась при нажатии, но панель навигации оставалась открытой при нажатии. Id обычно добавляет атрибуты data-toggle и target цели к каждому элементу навигации. как это: -

<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 );

Атрибуты добавляются в вывод браузера, но панель навигации не переключается, также после применения этой функции все мои теги привязки панели навигации получают состояние активной прокрутки, поэтому все выделены синим цветом.

Пожалуйста, помогите спасибо