Я не знаю, почему этот класс не добавляется через javascript

Я пытаюсь добавить javascript класс show с выпадающим содержимым, но он не добавляется туда, более того, консольные журналы работают совершенно нормально вплоть до последней области видимости тега javascript script. Может ли кто-нибудь помочь мне в этом?

Текст с id в основном поступает из базы данных django, которая является уникальной.

<div class="eps_dots more_dropdown dropdown">
  <a href="#" onclick="get()" id="{{course.course_id}}" class=""><i class="uil uil-ellipsis-v"></i></a>
  <div class="dropdown-content ">
    <span><i class="uil uil-heart"></i>Save</span>
    <span><i class="uil uil-ban"></i>Not Interested</span>
    <span><i class="uil uil-windsock"></i>Report</span>
  </div>
</div>
<script>
  function get() {
    const focused = document.activeElement.getAttribute("id");
    console.log(focused);

    menu(focused);
  }

  function menu(focused) {
    const path = '#' + focused + ' .dropdown-content';
    console.log(path);

    $(path).toggleClass("show");
  }
</script>                     

.eps_dots .show{
  display: block !important;
}

Учитывая, что вы используете jQuery, вам не следует получать атрибут id щелкнутого элемента в виде строки, чтобы вручную скомпоновать селектор.

Кроме того, вы должны использовать ненавязчивые обработчики событий для привязки событий, а не встроенные onclick атрибуты. Это позволит вам получить ссылку на щелкнутый элемент из события, которое передается обработчику в качестве аргумента. Отсюда вы можете перемещаться по DOM, чтобы найти .dropdown-content для переключения соответствующего класса.

jQuery($ => {
  $('.eps_dots > a').on('click', e => {
    e.preventDefault();
    $(e.currentTarget).closest('.eps_dots').find('.dropdown-content').toggleClass('show');
  });
});
.dropdown-content {
  display: none; 
}

.eps_dots .show {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="eps_dots more_dropdown dropdown">
  <a href="#" class="">
    Click here...
    <i class="uil uil-ellipsis-v"></i>
  </a>
  <div class="dropdown-content">
    <span><i class="uil uil-heart"></i>Save</span>
    <span><i class="uil uil-ban"></i>Not Interested</span>
    <span><i class="uil uil-windsock"></i>Report</span>
  </div>
</div>

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

Чтобы ваш код работал, .dropdown-content должен быть обернут внутри тега anchor вот так

    <a href="#" onclick="get()" id="{{course.course_id}}" class=""><i class="uil uil-ellipsis-v"></i>
     <div class="dropdown-content ">
      <span><i class="uil uil-heart"></i>Save</span>
      <span><i class="uil uil-ban"></i>Not Interested</span>
      <span><i class="uil uil-windsock"></i>Report</span>
     </div>
    </a>

Но поскольку это не тот случай, попробуйте использовать формат sibling

let current = document.querySelector('#' + focused);
let nextSibling = current.nextElementSibling;

Здесь nextSibling будет вашим элементом dropdown-content

Вернуться на верх