JavaScript无法为dropdown-content添加show类问题求助

问题1：选择器层级错误 #

你当前用的选择器 #{{course.course_id}} .dropdown-content 是在找a标签的子元素里的dropdown-content，但实际DOM结构中，dropdown-content和a标签是同级（都在.eps_dots容器内），导致选择器找不到目标元素。

修改方案：
通过点击的a标签找到父容器，再定位同级的dropdown-content，直接用原生JS操作更可靠：

function get(el) {
  // 获取当前a标签的父容器
  const parentContainer = el.closest('.eps_dots');
  // 切换目标元素的show类
  parentContainer.querySelector('.dropdown-content').classList.toggle('show');
}

同时把HTML里的onclick改为传递当前元素：

<a href="#" onclick="get(this)" id="{{course.course_id}}" class=""><i class="uil uil-ellipsis-v"></i></a>

问题2：CSS选择器精准度不足 #

当前CSS .eps_dots .show 会匹配.eps_dots下所有带show类的元素，可能出现样式冲突或优先级不足的情况，需要精准定位到dropdown-content：

.eps_dots .dropdown-content.show {
  display: block !important;
}

额外优化：避免页面跳转 #

点击带href="#"的a标签会触发页面跳转至顶部，可在onclick中阻止默认行为：

<a href="#" onclick="get(this); return false;" id="{{course.course_id}}" class=""><i class="uil uil-ellipsis-v"></i></a>

内容的提问来源于stack exchange，提问作者Sandesh Singh