如何在单击时平滑扩展边框底部答案

【问题标题】：How to expand border bottom on click smoothly如何在单击时平滑扩展边框底部
【发布时间】：2018-11-13 11:15:09
【问题描述】：

我有一个手风琴。在hover 中出现一个带有小width 的边框底部。

click这个边框底部如何平滑展开？

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>

【问题讨论】：

@TakitIsy 在这里很难理解，只是平滑地扩展边框宽度。这里有一个来自这个问题的例子，看看这个从中心边框底部扩展效果stackoverflow.com/questions/28623446/…

标签： javascript css

【解决方案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>

【讨论】：

【解决方案2】：

在这个块代码中->

.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;

}

更改两行代码 ->

border: none;
transition: 0.4s;

到这个->

border-bottom:1px solid #ffffffff;
transition: border 0.4s;

并添加代码悬停；例如：

 .accordion {
    border-bottom: 1px solid black;
 }

希望能帮到你；

【讨论】：