使用parentElement.nextSiblingElement实现下拉筛选时遇style未定义错误

嘿，你的问题根源很明确——你用了一个不存在的DOM属性nextSiblingElement，正确的属性名应该是nextElementSibling！

为什么会报错？ #

nextSibling会返回当前节点的下一个任意类型节点（包括文本节点，比如代码里的换行、空格），而nextElementSibling才是专门用来获取下一个元素节点的属性。你之前的代码里因为属性名写错，导致拿到的是undefined，自然就会抛出“Cannot read property 'style' of undefined”的错误。

修正后的基础代码 #

先把JavaScript函数里的错误属性名改掉，同时把重复的DOM查询存成变量，让代码更简洁易读：

const dropdown = (target) => {
  // 获取目标元素的父元素的下一个兄弟元素（也就是.brand-options）
  const optionsList = target.parentElement.nextElementSibling;
  // 切换display状态
  optionsList.style.display = optionsList.style.display === 'block' ? 'none' : 'block';
}

额外优化建议（更推荐的实践） #

1. 初始隐藏下拉列表：在CSS里给.brand-options加上默认的display: none，这样页面加载时列表就是隐藏的，符合下拉筛选器的常规交互：

.brand-options {
  display: none;
  /* 保留你原来的其他样式 */
}

2. 用class切换替代直接操作style：更推荐通过添加/移除class来控制显示隐藏，这样样式逻辑都集中在CSS里，维护起来更方便：

/* 添加一个隐藏类 */
.hidden {
  display: none;
}

const dropdown = (target) => {
  const optionsList = target.parentElement.nextElementSibling;
  optionsList.classList.toggle('hidden');
}

这时你只需要在HTML里给.brand-options加上hidden类作为初始状态，点击箭头时就会自动切换显示/隐藏啦。

完整修正后的代码示例 #

HTML

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="brand-filter">
  <div class="brand-head">
    <p>BRAND</p>
    <i class="fas fa-angle-down" onclick="dropdown(event.target)"></i>
  </div>
  <!-- 初始添加hidden类 -->
  <div class="brand-options hidden">
    <div class="option">
      <div class="option-check"></div>
      <p>Philips</p>
    </div>
    <div class="option">
      <div class="option-check"></div>
      <p>Bajaj</p>
    </div>
    <div class="option">
      <div class="option-check"></div>
      <p>Prestige</p>
    </div>
    <div class="option">
      <div class="option-check"></div>
      <p>Bosch</p>
    </div>
    <div class="option">
      <div class="option-check"></div>
      <p>Usha</p>
    </div>
    <div class="option">
      <div class="option-check"></div>
      <p>Samsung</p>
    </div>
  </div>
</div>

CSS

.brand-head { 
  display: flex; 
  justify-content: space-between; 
} 
.brand-head p { 
  font-family: 'Segoe UI'; 
  padding: 10px 20px; 
  font-weight: 600; 
  font-size: 14px; 
} 
.brand-head i { 
  padding: 15px 20px 5px; 
  cursor: pointer; /* 加上鼠标指针样式，提示可点击 */
} 
.brand-options .option { 
  font-family: 'Segoe UI'; 
  padding: 2px 0; 
  display: flex; 
} 
.brand-options .option-check { 
  width: 15px; 
  border: 1px solid rgb(194, 194, 194); 
  height: 15px; 
  background-color: rgb(255, 255, 255); 
  transition: background-color 200ms; 
  margin: 5px 20px; 
} 
.brand-options p { 
  font-size: 14px; 
  margin: 2px; 
}
/* 新增隐藏类 */
.hidden {
  display: none;
}

JavaScript

const dropdown = (target) => {
  const optionsList = target.parentElement.nextElementSibling;
  optionsList.classList.toggle('hidden');
}

这样你的下拉筛选器就能正常工作啦，点击箭头可以切换列表的显示和隐藏状态~

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