如何使所有手风琴在浏览器中打开，默认情况下在移动视图中关闭

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>

样式表CSS：

.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: '2C5';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "2C4";
}
.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

在这里我写一个解决方案。您需要在手风琴中添加班级名称。我命名了类手风琴，并触发了此类的点击事件。在这里，我假设最大移动宽度为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: '2C5';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "2C4";
}
.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>