javascript - 折叠手风琴时如何隐藏手风琴的底部边框？

问题描述

当展开的 Accordion 折叠时，展开的 Accordion 的底部边框仍然可见。当折叠手风琴时，底部边框不应该是可见的。这是代码：https ://jsfiddle.net/cliffeee/dcxj4raL/2/

我不确定脚本是否错误或是否是 CSS。有没有办法隐藏边框底部？我怎样才能完全折叠手风琴（包括底部边框）？

cshtml:

<h2 class="accordion-toggle">Open Collapsible</h2>
<div id="anyId" class="collapse">
  <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>

<h2 class="accordion-toggle">Open Section 1</h2>
<div class="collapse">
  <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>

查询：

var collapsible = document.getElementsByClassName("accordion-toggle");
        for (var i = 0; i < collapsible.length; i++) {
            collapsible[i].addEventListener("click", function (event) {
                var currentClassList = event.currentTarget.classList;
                if (currentClassList.contains('collapsed')) {
                    event.currentTarget.classList.remove("collapsed");
                    var content = event.currentTarget.nextElementSibling;
                    content.style.maxHeight = null;
                } else {
                    for (var j = 0; j < collapsible.length; j++) {
                        collapsible[j].classList.remove("collapsed")
                        collapsible[j].nextElementSibling.style.maxHeight = null;
                    }
                    this.classList.toggle("collapsed");
                    var content = this.nextElementSibling;
                    if (content.style.maxHeight) {
                        content.style.maxHeight = null;
                    } else {
                        content.style.maxHeight = content.scrollHeight + "px";
                    }
                }
            });
        }

CSS：

.accordion-toggle {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsed, .accordion-toggle:hover {
  background-color: #555;
}

.collapse {
 padding: 0 18px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 margin-bottom: -4px;
 border-left: 2px solid #f1f1f1;
 border-right: 2px solid #f1f1f1;
 border-bottom: 2px solid #f1f1f1
}

标签： javascriptjquerycssrazor

javascript - 折叠手风琴时如何隐藏手风琴的底部边框？

问题描述

解决方案

推荐阅读