css - 如何删除上按钮和下面板接触的空间的边框，使其看起来像合并？

Question

我正在制作一个带有隐藏面板的过滤器按钮。我有默认按钮。单击按钮时，面板将显示在按钮下方，但在此 View 中，我需要一条使按钮成为其中一部分的边框线，而不是按钮接触下方面板的边框。

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;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 20%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active {
  background-color: white;
  border: 1px solid;
  border-top-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-bottom-color: white;
}

.panel {
  border: 1px solid;
  border-bottom-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-top-color: lightgrey;
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<h2>Accordion</h2>

<button class="accordion">Section 1</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>

Answer 1

有几种方法可以满足您的要求，但您可以使用负底部边距将按钮向下拉 1px，使其白色边框与面板的顶部边框重叠:

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;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 20%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom: -1px; /* add this rule */
}

.active {
  background-color: white;
  border: 1px solid;
  border-top-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-bottom-color: white;
}

.panel {
  border: 1px solid;
  border-bottom-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-top-color: lightgrey;
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<h2>Accordion</h2>

<button class="accordion">Section 1</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>