Django项目中href与点击事件需顺序执行问题求助

当前点击「My Applications」区域时，<a>标签的默认跳转行为和JS绑定的下拉切换事件会同时触发，导致页面直接跳转，下拉菜单的切换效果无法正常展示。另外你的HTML存在语法错误：<a>标签的结束标签写成了</button>，这会导致DOM结构异常，影响后续JS获取下拉容器的逻辑。

根据你的实际需求，分两种场景处理：

场景1：点击主按钮仅展开下拉菜单，点击子选项再跳转 #

这是下拉菜单的常规逻辑，需要阻止<a>标签的默认跳转行为，只保留下拉切换功能：

步骤1：修正HTML语法错误 #

把错误的</button>改成</a>，确保DOM结构正确：

<a href="{% url 'my_applications' %}"
   class="nav_link {% if request.resolver_match.url_name == "payroll_941_files" %}active{% endif %} dropdown-btn">
    <img src="{% static 'application/img/icon_doc.svg' %} ">
    <span class="nav_name">My Applications</span>
</a>
<div class="row dropdown-container ">
    <div class="col-md-2">
        {% for company in companies %}
            <a href="{% url 'my_applications_id' company.id %}" class="company-row">{{ company.name | title }}</a>
        {% endfor %}
    </div>
</div>

步骤2：修改JS阻止默认跳转 #

在点击事件中添加event.preventDefault()，拦截<a>标签的跳转行为：

var dropdown = document.getElementsByClassName("dropdown-btn");

for (var dropdown_size = 0; dropdown_size < dropdown.length; dropdown_size++) {
    dropdown[dropdown_size].addEventListener("click", function(event) {
        // 阻止a标签的默认跳转行为
        event.preventDefault();
        this.classList.toggle("active"); 
        var dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}

场景2：先跳转到目标URL，新页面自动展开下拉菜单 #

如果你的需求是跳转后在新页面自动展开下拉，无需在原页面处理事件冲突，只需要在my_applications对应的模板中添加页面加载时自动展开的逻辑：

window.addEventListener('load', function() {
    var dropdownBtn = document.querySelector('.dropdown-btn');
    if (dropdownBtn) {
        dropdownBtn.classList.add('active');
        var dropdownContent = dropdownBtn.nextElementSibling;
        dropdownContent.style.display = "block";
    }
});

内容的提问来源于stack exchange，提问作者YASH 18cs85