Question

我正在使用 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;
}

任何帮助都会非常感谢！

Answer 1

首先，我建议您使用javascript而不仅仅是css。 2，我想让你记住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;
}

JS

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/

Answer 2

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

Answer 3

以下方法可以使用css：

1。）默认情况下打开内容并将css过渡到打开状态（没有javascript）。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

希望它有所帮助。

这些css可折叠div是否默认打开？

3 个答案: