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

您可以在代码末尾的第一个按钮上触发click事件：

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>

加载页面时需要保持可折叠1打开

1 个答案: