我不知道为什么这个类不通过javascript添加

Question

我正试图添加一个带有下拉内容的javascript类显示，但实际上并没有添加，因为控制台日志一直工作到javascript脚本标记的最后一个范围。有人能帮我摆脱困境吗？

带有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;
}

Answer 1

如果您使用的是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>

Answer 2

在"菜单">函数不存在，因为id不是下拉内容的父项，而是它的兄弟项，所以它永远不会工作。

为了让您的代码工作，.下拉内容应该像下面的一样包装在锚标记中

<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>

但由于情况并非如此，您应该尝试使用兄弟格式

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

这里的下一个脚本将是您的下拉内容元素