javascript - 加载页面时需要保持 collapsible 1 打开

Question

我使用了 W3schools 中的以下示例来创建可折叠菜单: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol
我只需要规定在首次加载页面时第一个可折叠项是打开的。我应该怎么做呢？

HTML:

        <div class="singleFeature" ng-repeat="feature in myJson.bottomFeatures">
            <button class="collapsible" ng-click="collapse($index);" ng-class = "{'active':$index == featureSelectedPos}">{{feature.title}}</button>
            <div class="content" id="{{$index}}">
                <div ng-repeat="subfeat in feature.subfeatures">
                        <div class="subfeature-title">{{subfeat.title}}</div>
                        <div class="subfeature-paragraph">{{subfeat.paragraph}}</div>
                </div>
            </div>
        </div>  

CSS:

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

.active {
  color: blue;
}

.content {
  background-color: white;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.8s ease-out;
}

.collapsible:after {
  content: '\02795'; 
  font-size: 13px;
  color: black;
  float: right;
  margin-left: 5px;
}

.subfeature-title
{
  font-size: 14px;
}

.subfeature-paragraph
{
  font-size: 10px;
}

.active:after {
  content: "\2796"; 
}

Javascript

  $scope.collapse = function(id)
  {
    if($scope.featureSelectedPos==id)//Closing an open div
    {
      $scope.featureSelectedPos = null;
      document.getElementById(id).style.maxHeight = null;   
    }
    else
    {
      if($scope.featureSelectedPos != null){
          document.getElementById($scope.featureSelectedPos).style.maxHeight = null;     
      }
      document.getElementById(id).style.maxHeight = document.getElementById(id).scrollHeight + "px";
      $scope.featureSelectedPos = id;
    }

  }

Answer 1

您可以在代码末尾的第一个按钮上触发点击事件:

document.querySelector('.collapsible').click();

var coll = document.getElementsByClassName("collapsible");
var i;

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

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

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <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>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <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="collapsible">Open Section 2</button>
<div class="content">
  <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="collapsible">Open Section 3</button>
<div class="content">
  <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>