按时间展开/折叠手风琴。 HTML JS

时间:2017-03-11 14:57:37

标签: javascript jquery html css html5

是否可以让手机随时间自动倒塌?我已尝试在javascript中使用删除类,但没有任何反应,请检查javascript,我的代码问题,也请在html代码中查看评论。感谢。

<html>
<head>
<style>
.acc-btn { 
  width:100%;
  margin:0 auto;
  padding:20px 25px;
  background:#34495E;
  border-bottom:1px solid #2C3E50;
}

.acc-content {
  height:0px;
  width:100%;
  margin:0 auto;
  background:#2C3E50;
}

.acc-content-inner {
  padding:30px;
}

.open1 {
  height: auto;
}

.open2 {
  height: auto;
}

h1 {
  font:700 20px/26px 'Lato', sans-serif;
}

</style>
</head>
<body>

<script>
function hideshow() {
    classList.remove('open1', 'open2');
    var h = parseInt(new Date().getHours());
    if (h >= 1 && h < 2) {
      classList.add('open1');
    }
    if (h >= 23 && h < 1) {
      classList.add('open2');
    }
    hideshow();
  }(document.querySelector('.acc-container'));
</script>

<div class="acc-container">
    <div class="acc-btn"><h1>Heading 1</h1></div> 
    <div class="acc-content open1"><!-- I want collapse this at 01:00 till 02:00 -->
      <div class="acc-content-inner">
        <p>Content</p>
      </div>
    </div>

<div class="acc-btn"><h1>Heading 2</h1></div> 
    <div class="acc-content open2"><!-- I want collapse this at 23:00 till 01:00 -->
      <div class="acc-content-inner">
        <p>Content</p>
      </div>
    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您可以使用:

var d = new Date();
if(d.getHours() > 18 && d.getHours() < 19)
   $('.acc-btn').first().slideUp();
if(d.getHours() > 19 && d.getHours() < 20)
   $('.acc-btn').last().slideUp();