Выполнить метод кнопки перед нажатием Javascript

Question

document.write(
  '<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
  '<div class="collapse list-unstyled" id="X1">'+
     '<a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Site 1 </a> '+
     '<a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Site 2 </a> '+
  '</div>'
);

У меня есть меню навигации с подменю, полным ссылок. На какой бы странице пользователь ни находился в данный момент, я хочу, чтобы конкретное подменю было расширено (по умолчанию оно будет сжато)

В приведенном выше коде, когда пользователь нажимает на элемент меню, открывается подменю. В любом случае я могу открыть это подменю, не нажимая на него. Использование BOOTSRAP SideNav для навигации, так что немного запутался

Настройка aria-extended = "false" * до aria-extended = "true" не работает

Answer 1

Вы можете добавить класс show к div.collapse, который хотите расширить.

Пример:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
  Menu
</a>
<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    Submenu
  </div>
</div>