代码之家 › 专栏 › 技术社区 › David Lytle

CSS手风琴点击关闭

css html javascript

David Lytle · 技术社区 · 7 年前

我有纯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 回复 | 直到 7 年前

random_user_name 7 年前

根据我上面的评论:

下面是您的代码,有两个小修改:

我把单选按钮改成了复选框。
我添加了一个小jQuery片段,它强制执行“accordion”方法,即在打开面板时关闭其他面板。

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>

Preston Reyes 7 年前

你需要使用JS。创建一个ID为“close”的按钮

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

这将通过JS隐藏它

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

隐藏的定义为: 隐藏:显示:无;

David user10336229 6 年前

这是丑陋的,但它给你的正是你想要的没有JavaScript。

您可以使用标准链接和 :target 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>