这些css可折叠div默认打开了吗？答案

【问题标题】：Have these css collapsable divs open by default?这些css可折叠div默认打开了吗？
【发布时间】：2015-07-17 11:04:33
【问题描述】：

我正在使用 jsfiddle.net/ts4dk6hp/ 想知道我是否可以

a) 默认打开内容

b) 有一个平滑的 css 过渡到打开（没有 javascript）

HTML

<div id="show">
    <a href="#show" id="open" class="none">Open</a>
    <div id="content">

        <a href="#hide" id="close" class="none">Close</a>
        <br>some text...
    </div>
</div>

CSS

#content {
    display: none;
}
#show:target #content {
    display: block;
}
#show:target #open {
    display: none;
}

任何帮助将非常感谢！

【问题讨论】：

标签： html css hide accordion collapse

【解决方案1】：

首先，我建议您使用 javascript 而不仅仅是 css。第二，我想让你记住，css动画只支持较新的浏览器。

我已经更新了你的 jsfiddle，希望对你有帮助。

HTML

<div id="show">
<a href="#show" id="openclose">Open</a>
<div id="content">
    <br>some text...
    <br> Mur text, duh...
    <br> Lorem
    <br> Ipsum
    <br> Watchama sayin'?
    <br> Have fun!
</div>

CSS

#content {
    transition: opacity 1s ease-in, height 500ms ease-out;
    opacity: 0;
    height: 200px;
    width: 200px;
    background: gray;
}

var open = true;

$('#openclose').click(function() {
    if (!open) {
        open = true;
        $(this).text('Close');
        $('#content').css({
            opacity: 1,
            height: '200px',
            overflow: 'hidden',
        });
        $('#content').one('transitionend', function() {
            $(this).css('overflow', 'auto');
        });
    } else {
        open = false;
        $(this).text('Open');
        $('#content').css({
            opacity: 0,
            height: '0px',
            overflow: 'hidden',
        });
        $('#content').one('transitionend', function() {
            $(this).css('overflow', 'auto');
        });
    }
});

http://jsfiddle.net/MashedPotatoes/ts4dk6hp/13/

【讨论】：

那是因为我没有让它在页面加载时淡入，如果我愿意的话我可以。给你jsfiddle.net/MashedPotatoes/ts4dk6hp/17
我想，我还没有真正考虑过，你的也很好。喜欢你如何扩展到纯 JavaScript。恭喜，恭喜。 jnapier 也让代码玩得开心！
对，如果您自己使用纯 JavaScript，则不必真正关心，因为将要使用该站点的人不会喜欢源代码无论如何。
让我们continue this discussion in chat.

【解决方案2】：

要扩展谦虚.rumble.6x3 的评论，如果没有 JavaScript，您将无法满足您的第一个或第二个要求。主要原因是 CSS 旨在为内容设置样式，而不是执行动画和与事件交互（有例外）。

【讨论】：

【解决方案3】：

您可以按照以下方式使用 css：

1.) 内容默认打开并平滑 css 过渡到打开（没有 javascript）。

#open {
    display: none;
}
#show:target #content {
     opacity: 0;
}
#show:target #close {
    display: none;   
}
#show:target #open {
    display: block;
}
#content{
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
     transition: opacity 0.5s ease-in-out;
}

#show{
  display:table;
}

<div id="show">
    <a href="#show" id="close" >Close</a>
    <a href="#hide" id="open" >Open</a>
    <div id="content">
         <br>some text...
    </div>
</div>

希望对你有帮助。

【讨论】：