如何使所有手风琴在浏览器中打开并默认在移动视图中关闭？

Question

我正在根据我的要求编辑手风琴，因为默认情况下手风琴是关闭的。我希望它在桌面浏览器中默认打开并在移动浏览器中保持关闭。 HTML、CSS和JS代码如下。我相信你很清楚我的要求。

HTML代码：

<div class="rightSideAccor">
  <button class="loginAccordion">Section 1</button>
  <div class="panel">
    <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>
</div>

风格sheetCSS:

.rightSideAccor {
    float: left;
    width: 356px;
    height: auto;
    margin-top: 120px;
    padding: 5px;
}
.loginAccordion {
    opacity: .8;
  background-color: #1e1b1a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #1e1b1a;
}
.loginAccordion:after {
  content: 'C5';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "C4";
}
.panel {
  opacity: .8;
  padding: 0 18px;
  background-color: #1e1b1a;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

JS代码：

<script>
  var acc = document.getElementsByClassName("loginAccordion");
  var i;

  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";
      } 
    });
  }
</script>

Answer 1

这里我写一个解决方案。您需要为手风琴添加一个 class 名称。我将手风琴命名为class，并通过这个class触发点击事件。这里我假设最大移动宽度是 500px。你可以改变它。

var acc = document.getElementsByClassName("loginAccordion");
var i;

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";
    }
  });
}

//suppose the max width of mobile is 500px
if (screen.width > 500) {
  var accordion = document.getElementsByClassName('accordion');
  Object.keys(accordion).forEach(el => {
    accordion[el].click();
  });


}

.rightSideAccor {
  float: left;
  width: 356px;
  height: auto;
  margin-top: 20px;
  padding: 5px;
}

.loginAccordion {
  opacity: .8;
  background-color: #1e1b1a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #1e1b1a;
}

.loginAccordion:after {
  content: 'C5';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "C4";
}

.panel {
  opacity: .8;
  padding: 0 18px;
  background-color: #1e1b1a;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<div class="rightSideAccor">
  <button class="accordion loginAccordion">Section 1</button>
  <div class="panel">
    <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>
</div>

如何使所有手风琴在浏览器中打开并默认在移动视图中关闭？

How to make all accordion open in browser and close in mobile view by default?

javascript

accordion

jquery-ui-accordion