UL/LI树形展开功能异常：点击含链接节点时跳转与展开冲突

这个问题其实是事件冒泡和链接默认跳转行为冲突导致的：你给列表里的a标签绑定了展开/折叠的点击事件，但a标签本身的默认行为就是跳转到指定地址，所以点击时两个操作会同时触发，这就不符合预期了。

下面给你几种针对性的解决方案，你可以根据自己的实际场景选择：

方案1：如果绑定事件的a标签只是展开触发器（不需要跳转） #

如果这些a标签只是用来控制树形结构展开/折叠的，根本不需要跳转功能，那直接在事件处理函数里阻止链接的默认行为就行：

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        // 阻止链接的默认跳转行为，只执行展开/折叠
        e.preventDefault();
        
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
    });
}

方案2：区分展开触发器和可跳转链接 #

如果你的列表项里同时有「展开/折叠按钮」和「可跳转链接」，那最好把展开事件绑定到专门的触发器上（比如一个按钮或图标），这样点击链接时就不会触发展开操作了。

修改后的HTML结构示例 #

<ul class="tree">
    <li>
        <!-- 专门的展开触发器 -->
        <span class="toggle-icon">▶</span>
        <!-- 可跳转的链接 -->
        <a href="/your-link">目标页面</a>
        <ul class="sub-tree">
            <li>子列表项</li>
        </ul>
    </li>
</ul>

对应的JS代码 #

// 给展开触发器绑定事件
var toggles = document.querySelectorAll('ul.tree .toggle-icon');
for(var i = 0; i < toggles.length; i++){
    toggles[i].addEventListener('click', function(e) {
        // 阻止事件冒泡，避免影响其他元素
        e.stopPropagation();
        
        // 找到对应的父级li元素
        var parentLi = this.closest('li');
        var classList = parentLi.classList;
        
        if(classList.contains("open")) {
            classList.remove('open');
            // 关闭所有子级展开项
            var opensubs = parentLi.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
    });
}

方案3：点击链接时阻止事件冒泡 #

如果你的展开事件是绑定在父级li元素上的，那点击链接时可以阻止事件向上冒泡，这样就不会触发li上的展开/折叠操作了：

// 给所有可跳转的链接绑定事件
var links = document.querySelectorAll('ul.tree li a[href]');
for(var i = 0; i < links.length; i++){
    links[i].addEventListener('click', function(e) {
        // 阻止事件冒泡到父元素，避免触发展开/折叠
        e.stopPropagation();
    });
}

这样点击链接时，只会执行跳转操作，不会触发树形结构的展开/折叠。

内容的提问来源于stack exchange，提问作者Surajit Mitra