动态生成UL列表末尾多余箭头显示问题求助

这个问题的核心在于CSS伪类:last-child是基于DOM节点的物理位置判断的，完全不考虑元素的显示状态——哪怕子LI设置了display: none，它依然会被算作DOM中的兄弟节点，导致你末尾的父LI因为不是真正的:last-child而错误显示箭头。下面给你两种可行的解决方案：

方案一：调整DOM结构（推荐，更符合语义化） #

原DOM结构把父LI和子LI放在同一层级的UL里，混淆了层级关系。正确的做法是把子LI嵌套进父LI内部的独立UL中，这样同层级的LI都是平级项，不会被子节点干扰。

修改后的HTML结构（动态生成时按此逻辑输出） #

<div class="mainDiv"> 
  <ul id="myUL"> 
    <li id="li-1" class="myLI">分类1</li> 
    <li id="li-2" class="myLI">分类2
      <ul class="childUL">
        <li id="li-2.1" class="myLI">子分类2.1</li> 
        <li id="li-2.2" class="myLI">子分类2.2</li>
      </ul>
    </li> 
  </ul> 
</div>

配套CSS代码 #

ul#myUL { 
  list-style: none; 
  margin: auto; 
  display: flex; 
  align-items: center;
}
li.myLI { 
  display: inline-block; 
  padding: 10px 25px; 
  border: 1px solid black; 
  margin: 0 25px; 
  position: relative;
  cursor: pointer; /* 给父LI加点击提示 */
}
/* 仅给同层级的非最后一个LI添加箭头 */
ul#myUL > li.myLI:not(:last-child):after,
ul.childUL > li.myLI:not(:last-child):after { 
  content: ''; 
  height: 1px; 
  background: black; 
  width: 50px; 
  position: absolute; 
  right: -50px; 
  top: 50%; 
}
ul#myUL > li.myLI:not(:last-child):before,
ul.childUL > li.myLI:not(:last-child):before { 
  content: ''; 
  position: absolute; 
  width: 0; 
  height: 0; 
  top: 50%; 
  border-style: solid; 
  border-width: 7px 0 7px 20px; 
  border-color: transparent transparent transparent black; 
  right: -50px; 
  transform: translateY(-50%); 
}
/* 子UL默认隐藏 */
ul.childUL { 
  list-style: none; 
  display: none; 
  margin-top: 10px; 
  padding-left: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
}
/* 点击父LI切换子UL显示状态 */
li.myLI.active > ul.childUL { 
  display: flex; 
  flex-direction: column; /* 子项垂直排列，可按需调整 */
}
div.mainDiv { 
  display: flex; 
  width: 60%; 
  margin: auto; 
  border: 3px solid #73AD21; 
  padding: 20px;
}

配套JS（处理点击切换） #

// 给所有包含子UL的父LI绑定点击事件
document.querySelectorAll('li.myLI:has(> ul.childUL)').forEach(parentLi => {
  parentLi.addEventListener('click', () => {
    parentLi.classList.toggle('active');
  });
});

这种方案的优势是语义化清晰，后续维护更简单，且原生CSS的:not(:last-child)就能完美生效，不会出现多余箭头的问题。

方案二：用JS动态控制箭头显示（适合无法修改DOM结构的场景） #

如果不能调整DOM结构，我们可以通过JavaScript判断每个LI后面是否有可见的兄弟LI，动态给需要显示箭头的LI添加/移除样式类。

修改后的CSS代码 #

ul#myUL { list-style: none; margin:auto; }
li.myLI { 
  display:inline-block; 
  padding: 10px 25px; 
  border: 1px solid black; 
  margin: 0 25px; 
  position: relative;
  cursor: pointer;
}
/* 把箭头样式移到独立类中 */
li.myLI.has-next-arrow:after { 
  content: ''; 
  height: 1px; 
  background: black; 
  width: 50px; 
  position: absolute; 
  right: -50px; 
  top: 50%; 
}
li.myLI.has-next-arrow:before { 
  content: ''; 
  position: absolute; 
  width: 0; 
  height: 0; 
  top: 50%; 
  border-style: solid; 
  border-width: 7px 0 7px 20px; 
  border-color: transparent transparent transparent black; 
  right: -50px; 
  transform: translateY(-50%); 
}
div.mainDiv { display:flex; width:60%; margin: auto; border: 3px solid #73AD21; }

配套JS代码 #

// 更新所有LI的箭头显示状态
function updateArrowStates() {
  const allLis = document.querySelectorAll('li.myLI');
  
  allLis.forEach(li => {
    // 查找当前LI后面第一个可见的兄弟LI
    let nextVisibleLi = li.nextElementSibling;
    while (nextVisibleLi) {
      const displayStatus = window.getComputedStyle(nextVisibleLi).display;
      if (displayStatus !== 'none') break;
      nextVisibleLi = nextVisibleLi.nextElementSibling;
    }
    
    // 根据是否存在可见兄弟，添加/移除箭头类
    if (nextVisibleLi) {
      li.classList.add('has-next-arrow');
    } else {
      li.classList.remove('has-next-arrow');
    }
  });
}

// 绑定子LI切换事件
document.querySelectorAll('li.myLI').forEach(li => {
  // 假设子LI是当前LI的直接兄弟（按原DOM结构）
  const childLis = Array.from(document.querySelectorAll('li.myLI')).filter(item => {
    return item.id.startsWith(li.id + '.');
  });
  
  if (childLis.length > 0) {
    li.addEventListener('click', () => {
      // 切换子LI的显示状态
      childLis.forEach(child => {
        child.style.display = child.style.display === 'none' ? 'inline-block' : 'none';
      });
      // 更新箭头状态
      updateArrowStates();
    });
  }
});

// 页面加载时初始化箭头状态
window.addEventListener('load', updateArrowStates);

这种方案无需修改DOM结构，但需要额外的JS逻辑来维护箭头状态，适合已有DOM结构无法调整的场景。

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