javascript - 页面加载时需要保持可折叠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;
    }

  }

标签： javascriptjqueryhtmlcss

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>