Почему переворачиваются все стрелочки в dropdown?

Question

[Анастасия]

Всем привет
У меня есть вот такой скрипт который обеспечивает работу нескольким dropdown. каждый dropdown имеет одинаковую структуру и отличается только одним родительским классом ("link", "language" и "currency")

function dropdownFunctionality(dropdownParentClass) {
  $(`.${dropdownParentClass} .dropdown-toggle`).click(function () {
    $(this).next(`.${dropdownParentClass} .dropdown-content`).toggle();
    $(`.${dropdownParentClass} .dropdown-toggle-arrow`).toggleClass("rotate");
  });

  $(document).click(function (e) {
    var target = e.target;
    if (
      !$(target).is(`.dropdown.${dropdownParentClass}`) &&
      !$(target).parents().is(`.dropdown.${dropdownParentClass}`)
    ) {
      $(`.${dropdownParentClass} .dropdown-content`).hide();
      $(`.${dropdownParentClass} .dropdown-toggle-arrow`).removeClass("rotate");
    }
  });
}

$(function () {
  dropdownFunctionality("link");
  dropdownFunctionality("language");
  dropdownFunctionality("currency");
});

Эта линейка кода отвечает за переворачивание стрелочки dropdown

$(`.${dropdownParentClass} .dropdown-toggle-arrow`).removeClass("rotate");

У меня есть много элементов с классом link и все они имеют стрелочку с классом .dropdown-toggle-arrow, и при нажатии на элемент с классом .link все стрелочки переворачиваются одновременно.

Как это исправить?

Comments

[Вадим]

Демку бы, если хотите прям чтоб помогли с решением.
А так ответ такой: раз у Вас много таких элементов, то и незачем искать их все. Нужно искать .dropdown-toggle-arrow в рамках текущего обрабатываемого дропдауна.

[Анастасия]

Вадим, https://codepen.io/anastasia_pat/pen/oNYbMaV

Answer 1

[ildar-meyker]

Ваш код избыточен.

$(document).on('click', '.dropdown-toggle', function () {
  $(this).closest('.dropdown')
    .find('.dropdown-toggle-arrow').toggleClass('rotate').end()
    .find('.dropdown-content').slideToggle();
});

Comments

[Анастасия]

А как закрывать конкретный .dropdown-content при нажатии вне .dropdown?

[ildar-meyker]

Можете указать data-атрибут для кнопки с указанием на дропдаун, с которым хотите взаимодействовать.

<button class="outside-button" data-target="#dropdown-1">Toggle Dropdown 1</button>
<button class="outside-button" data-target="#dropdown-2">Toggle Dropdown 2</button>

$(document).on('click', '.outside-button', function () {
  $( $(this).data('target') )
    .find('.dropdown-toggle-arrow').toggleClass('rotate').end()
    .find('.dropdown-content').slideToggle();
});