CSS手风琴关闭点击

时间：2019-01-04 20:25:24

标签： javascript html css

我有纯CSS手风琴，我希望每个面板在单击时都能关闭。我可以仅使用CSS来实现，还是必须添加JavaScript？ 

#accordion input:not(:checked) + div {
  display: none;
}

#accordion input:checked + div {
  display: block;
}

#accordion input {
  width: 0px;
  height: 0px;
  margin: 0px;
  opacity: 0.0;
}

#accordion label {
  cursor: pointer;
  display: inline-block;
  width: 750px;
  background: #ffffff;
  color: #ff6600;
  font-family: open sans;
  border: 1px solid #ff6600;
  font-size: 24px;
  padding: 25px 20px;
  margin: 0px;
}

#accordion div {
  width: 750px;
  background: white;
  border: 1px solid gray;
  padding: 15px 20px;
}

#accordion li {
  list-style: none;
}
div.scroll {
  max-height: 1050px;
  overflow: auto;
}
.timely-stream:not(.timely-agenda) .timely-event {
  min-height:92px; !important
}
<ul id="accordion">
<li>
<label for="section-1-checkbox">OneHockey</label>
<input id="section-1-checkbox" type="radio" name="accordion-level-1" />
<div><a href="https://imgur.com/HJwXuym"><img 
src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" 
title="source: imgur.com" /></a></div>
</li>
<li>
<label for="section-2-checkbox">TOURNAMENTS</label>
<input id="section-2-checkbox" type="radio" name="accordion-level-1" />
<div class="scroll">
<script src="//dashboard.time.ly/js/embed.js" data- 
src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" 
data-max-height="0" id="timely_script" class="timely-script"></script>
</div>
</li>
<li>
<label for="section-3-checkbox">INFO</label>
<input id="section-3-checkbox" type="radio" name="accordion-level-1" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<label for="section-4-checkbox">STANDINGS/SCHEDULE</label>
<input id="section-4-checkbox" type="radio" name="accordion-level-1" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>

3 个答案:

答案 0 :(得分：2)

根据我上面的评论： 如果您需要能够通过单击来取消选择某个项目，则需要从单选按钮切换到复选框。然后，这导致允许打开多个面板。如果必须让它在打开新面板时自动关闭其他面板，并且如果再次单击它必须关闭打开的面板，那么您至少需要一些javascript。

因此，以下是您的代码，做了两个小的修改：

  1. 我已从单选按钮更改为复选框。
  2. 我添加了一个很小的jQuery代码片段，用于强制执行“手风琴”方法，在打开面板时关闭其他面板。

jQuery(function($) {
  $('input[type="checkbox"]').on('change', function() {
    let state = $(this).is(':checked');
    $('input[type="checkbox"]').prop('checked', false);
    $(this).prop('checked', state);
  });
});
#accordion input:not(:checked)+div {
  display: none;
}

#accordion input:checked+div {
  display: block;
}

#accordion input {
  width: 0px;
  height: 0px;
  margin: 0px;
  opacity: 0.0;
}

#accordion label {
  cursor: pointer;
  display: inline-block;
  width: 750px;
  background: #ffffff;
  color: #ff6600;
  font-family: open sans;
  border: 1px solid #ff6600;
  font-size: 24px;
  padding: 25px 20px;
  margin: 0px;
}

#accordion div {
  width: 750px;
  background: white;
  border: 1px solid gray;
  padding: 15px 20px;
}

#accordion li {
  list-style: none;
}

div.scroll {
  max-height: 1050px;
  overflow: auto;
}

.timely-stream:not(.timely-agenda) .timely-event {
  min-height: 92px;
  !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="accordion">
  <li>
    <label for="section-1-checkbox">OneHockey</label>
    <input id="section-1-checkbox" type="checkbox" name="accordion-level-1" />
    <div>
      <a href="https://imgur.com/HJwXuym"><img src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" title="source: imgur.com" /></a>
    </div>
  </li>
  <li>
    <label for="section-2-checkbox">TOURNAMENTS</label>
    <input id="section-2-checkbox" type="checkbox" name="accordion-level-1" />
    <div class="scroll">
    </div>
  </li>
  <li>
    <label for="section-3-checkbox">INFO</label>
    <input id="section-3-checkbox" type="checkbox" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
  <li>
    <label for="section-4-checkbox">STANDINGS/SCHEDULE</label>
    <input id="section-4-checkbox" type="checkbox" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
</ul>

答案 1 :(得分：0)

您将需要使用JS。创建一个ID为“关闭”的按钮

jQuery(function($) {
   $( "#close" ).click(function() {
       $( "#target" ).toggle();
    });
});

这将通过JS隐藏它 或使用

jQuery(function($) {
    $( "#close" ).click(function() {
         $( "#target" ).addClass('hidden');
     });
});

隐藏的定义为： 隐藏：显示：无；

答案 2 :(得分：0)

这很丑陋，但没有JavaScript就可以为您提供所需的内容。

您可以使用标准链接和:taget pseudo class。

链接到包含目标手风琴项目的li。然后显示该项目并切换打开和关闭链接

我个人会使用一个简单的javascript增强选项。

/*Hide child div*/
#accordion li > div {
  display: none;
}
 
 #accordion li a.close {
  display: none;
}

/*Display target div*/
#accordion li:target > div {
  display: block;
}

/*Toggle open and close links*/
#accordion li:target > a.open {
   display:none;
}

#accordion li:target > a.close {
   display:block;
}
   

#accordion a {
  cursor: pointer;
  display: inline-block;
  width: 750px;
  background: #ffffff;
  color: #ff6600;
  font-family: open sans;
  border: 1px solid #ff6600;
  font-size: 24px;
  padding: 25px 20px;
  margin: 0px;
  text-decoration:none;
}

#accordion div {
  width: 750px;
  background: white;
  border: 1px solid gray;
  padding: 15px 20px;
}

#accordion li {
  list-style: none;
}
div.scroll {
  max-height: 1050px;
  overflow: auto;
}
.timely-stream:not(.timely-agenda) .timely-event {
  min-height:92px; !important
}
<ul id="accordion">
<li id="section1">
<a href="#section1" class="open">OneHockey</a>
<a href="#" class="close">OneHockey</a>
<div ><a href="https://imgur.com/HJwXuym"><img 
src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" 
title="source: imgur.com" /></a></div>
</li>
<li id="section2">
<a href="#section2" class="open">TOURNAMENTS</a>
<a href="#" class="close" >TOURNAMENTS</a>
<div class="scroll" >
<script src="//dashboard.time.ly/js/embed.js" data- 
src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" 
data-max-height="0" id="timely_script" class="timely-script"></script>
</div>
</li>
<li id="section3">
<a href="#section3" class="open">INFO</a>
    <a href="#" class="close">INFO</a>
<div >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li id="section4">
<a href="#section4" class="open">STANDINGS/SCHEDULE</a>
    <a href="#" class="close">STANDINGS/SCHEDULE</a>
<div >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>

相关问题
最新问题