javascript - 如何在单击时平滑地扩展边框底部

Question

我有一个 Accordion 。在 hover 中出现一个 border bottom，width 很小。

如何在点击时平滑地扩展这个边框底部？

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion {
    font-size: 27px;
    background-color: $default-white;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    transition: 0.4s;
}

.active {
    border-bottom: 1px solid $default-black;
} 
.panel {
    padding: 0 18px; // background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
a {
        text-decoration: none;
        color: $default-black;
        text-align: center;
        font-size: 18px;
        font-family: 'fira_sansregular';
        color: grey;
}
li:hover:before {
          content: "";
          position: absolute;
          left: 40%;
          height: 1px;
          margin-top: 75px;
          text-align: center;
          width: 20%;
          border-bottom: 1px solid #000;
}
ul {
  list-style-type:none;
}

<ul class='nav'>
  <li>
      <button class="accordion">BLA BLAS</button>
      <div class="panel">
          <a href='#'>First bla</a>
          <a href='#'>second bla</a>
          <a href='#'>third bla</a>
          <a href='#'>fourth bla</a>
      </div>
  </li>
  <li>
      <button class="accordion">FILOSOPHY OF BLA</button>
      <div class="panel">
          <a href='#'>Page 2</a>
      </div>
  </li>
  <li>
      <button class="accordion">BLA BLA</button>
      <div class="panel">
          <a href='#'>Page 3</a>
      </div>   
  </li>
  <li>
      <button class="accordion">SOME BLA BLA</button>
      <div class="panel">
          <a href='#'>Page 4</a>
      </div>
  </li>
  <li>
     <button class="accordion">BLA BLA</button>
      <div class="panel">
          <a href='#'>Page 5</a>
      </div> 
  </li>

</ul>

Answer 1

这是您要找的吗？

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

    this.parentNode.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion {
  font-size: 27px;
  background-color: $default-white;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  transition: 0.4s;
}

.panel {
  padding: 0 18px; // background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

a {
  text-decoration: none;
  color: $default-black;
  text-align: center;
  font-size: 18px;
  font-family: 'fira_sansregular';
  color: grey;
}

.nav li {
  position: relative;
}

.nav li:hover:before {
  left: 40%;
  width: 20%;
  border-bottom: 1px solid #000;
  transition: all 0.5s;
}

.nav li.active:before,
.nav li:hover:before {
  content: "";
  position: absolute;
  height: 1px;
  bottom: 0;
  border-bottom: 1px solid #000;
}

.nav li.active:before {
  width: 100%;
  left: 0;
}

ul {
  list-style-type: none;
}

<ul class='nav'>
  <li>
    <button class="accordion">BLA BLAS</button>
    <div class="panel">
      <a href='#'>First bla</a>
      <a href='#'>second bla</a>
      <a href='#'>third bla</a>
      <a href='#'>fourth bla</a>
    </div>
  </li>
  <li>
    <button class="accordion">FILOSOPHY OF BLA</button>
    <div class="panel">
      <a href='#'>Page 2</a>
    </div>
  </li>
  <li>
    <button class="accordion">BLA BLA</button>
    <div class="panel">
      <a href='#'>Page 3</a>
    </div>
  </li>
  <li>
    <button class="accordion">SOME BLA BLA</button>
    <div class="panel">
      <a href='#'>Page 4</a>
    </div>
  </li>
  <li>
    <button class="accordion">BLA BLA</button>
    <div class="panel">
      <a href='#'>Page 5</a>
    </div>
  </li>

</ul>