用 css 展开和折叠

Posted 2023-03-24

【中文标题】用 css 展开和折叠

【英文标题】：Expand and collapse with css

【发布时间】：2014-11-25 02:22:56

【问题描述】：

我在 Jquery 中创建了一个函数来展开和折叠 div 的内容。但是现在我想只使用 CSS 来制作它，并使用箭头的图像，比如这些

观看直播jsFiddle

我也想消除所有这些标签跨度，只保留 div 和它的内容

这是我到目前为止的代码。

<div class='showHide'>
    <span class='expand'><span id="changeArrow">&#8593;</span>Line expand and collapse</span>
    <fieldset id="fdstLorem">Lorem ipsum...</fieldset>
</div>

$(document).ready(function () 
    $('.showHide>span').click(function () 
        $(this).next().slideToggle("slow");
        return false;
    );
    $(".showHide>span").toggle(function () 
        $(this).children("#changeArrow").text("↓");
    , function () 
        $(this).children("#changeArrow").text("↑");
    );
);

【问题讨论】：

你不能只在 css 中这样做。

我想我可以。那么我怎么能至少用那些箭头来做到这一点并删除不必要的html呢？

看看这个 PURE CSS 解决方案：***.com/questions/9100344/…

@deKajoo 使用纯 CSS 是可能的。

jsfiddle.net/thurstanh/emtAm/2

【参考方案1】：

.fieldsetContainer 
    height: 0;
    overflow: hidden;
    transition: height 400ms linear;


#toggle 
    display: none;


#toggle:checked ~ .fieldsetContainer 
    height: 50px;


label .arrow-dn  display: inline-block; 
label .arrow-up  display: none; 

#toggle:checked ~ label .arrow-dn  display: none; 
#toggle:checked ~ label .arrow-up  display: inline-block; 

<div class='showHide'>
    <input type="checkbox" id="toggle" />
    
    <label for="toggle">
        <span class='expand'>
            <span class="changeArrow arrow-up">↑</span>
            <span class="changeArrow arrow-dn">↓</span>
            Line expand and collapse
        </span>
    </label>
    
    <div class="fieldsetContainer">
        <fieldset id="fdstLorem">
            Lorem ipsum...
        </fieldset>
    </div>
</div>

【讨论】：

是否有一些巧妙的方法可以让每页不止一个可折叠区域？

【参考方案2】：

这是我的做法，与使用复选框做的事情相比，它简单明了，但只会在悬停或单击并按住时展开（这对触摸有好处）...

<style>

.collapse-able 
    height: 1.2rem;
    overflow: hidden;


.collapse-able:active, .collapse-able:hover 
    height: auto;


</style>

与

<div class="collapse-able">
  <h1> The first line will always show </h1>
  </br> 
  But what's underneath won't until hover or click and drag. Which is neat.
</div>