如何隐藏父Div子元素：修复Accordion按钮点击仅隐藏对应短描述

我明白你的需求了——现在点击任何一个Accordion按钮都会把所有短描述都隐藏，这是因为你的代码里用了全局选择器，没有限定到当前点击的按钮范围内。咱们来修改一下，让它只对当前点击的按钮生效：

问题根源 #

你原来代码里的$("\.short").closest('small').hide();是在页面中查找所有带有short类的元素，所以不管点哪个按钮，所有短描述都会被隐藏。我们需要把选择范围缩小到当前被点击的按钮内部。

修改后的JavaScript代码 #

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    // 仅获取当前点击按钮内的短描述元素
    var currentShortDesc = $(this).find('.short');
    
    if (panel.style.display === "block") {
      panel.style.display = "none";
      // 收起面板时，重新显示当前按钮的短描述
      currentShortDesc.show();
    } else {
      panel.style.display = "block";
      // 展开面板时，隐藏当前按钮的短描述
      currentShortDesc.hide();
    }
  });
}

关键改动说明 #

1. 精准定位元素：用$(this).find('.short')代替全局查找，this代表当前被点击的Accordion按钮，find()只会在这个按钮的子元素里找short类的元素，这样就不会影响其他按钮的内容了。
2. 交互逻辑完善：增加了面板收起时显示短描述的逻辑，这样用户再次点击关闭面板时，对应的短描述会重新出现，体验更流畅。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #ccc;
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1 <small class="short" style="color:red; display:block">Hello this is short description 1 </small> </button>
<div class="panel">
  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2 <small class="short" style="color:red; display:block">Hello this is short description 2 </small> <p id="short-desc2" style="display:none;">Hello this is short description </p> </button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3 <small class="short" style="color:red; display:block">Hello this is short description 3</small> </button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    var currentShortDesc = $(this).find('.short');
    
    if (panel.style.display === "block") {
      panel.style.display = "none";
      currentShortDesc.show();
    } else {
      panel.style.display = "block";
      currentShortDesc.hide();
    }
  });
}
</script>

</body>
</html>

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