как сделать выпадающее меню активным в bootstrap 4

Question

У меня есть раскрывающееся меню, и я пытаюсь предоставить активное состояние при нажатии. Теперь это работает, когда пользователь нажимает на ссылку, добавляется активный класс, и никаких проблем не возникает. Проблема заключается в удалении активного класса при нажатии другого тега. Если щелкнуть тот же тег, класс будет удален, но если щелкнуть другой тег, появится следующее вхождение.

Я хочу, чтобы всегда была активна только одна ссылка

Jquery:

    $(document).ready(function () {

    $(document).click(function () {
        $('.link.activeLink').removeClass('activeLink')
    });

    $('.link').click(function (e) {
        $(this).toggleClass('activeLink');

        if ($(e.parentNode).hasClass('show')) {
            $('.activeLink').removeClass('activeLink');
        } 
    });

});

html:

  <li class="nav-item dropdown px-2 arrowDown">
                    <a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        Flat Roofing
                    </a>

Обновлен захват экрана:

, как вы можете видеть, раскрывающийся список закрыт, но ссылка остается активным, это поведение, которое я не хочу.

Answer 1

так что это было решение

  $(document).ready(function () {
    $(document).click(function (e) {
        $('.link.activeLink').removeClass('activeLink')
    });

    $('.link').click(function (e) {
        if ($(e.target).hasClass('activeLink')) {
            $(this).removeClass('activeLink');
        } else {
            $('.link.activeLink').removeClass('activeLink')
            $(this).toggleClass('activeLink');
        }         
    });
});

Answer 2

Вы можете сохранить только одну активную ссылку в любое время, удалив класс .active из каждого элемента с классом .link, прежде чем переключать класс .active на выбранный в данный момент .link. Обратите внимание, что также необходимо вызывать stopPropagation() при щелчке по ссылке, чтобы остановить всплывающее событие клика до функции $(document).click().

$(document).ready(function() {
    $(document).click(function(e) {
      $('.link.activeLink').removeClass('activeLink')
    });

    $('.link').click(function(e) {
      e.stopPropagation();
      $('.link.activeLink').removeClass('activeLink')
      $(this).toggleClass('activeLink');
    });
});

.activeLink {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item dropdown px-2 arrowDown">
    <a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Flat Roofing
    </a>
  </li>
  <li class="nav-item dropdown px-2 arrowDown">
    <a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Concrete Roof Tiles
    </a>
  </li>
</ul>