Here is a nice example for you

Question

我对网络编程比较陌生（即不到一个月）。

我想要做的是为常见问题列表创建一个漂亮的流畅隐藏/显示效果，如此网站上所示：

http://www.hl.co.uk/pensions/sipp/frequently-asked-questions

我意识到这个网站正在使用javascript来创建效果，但我想知道是否还有用CSS来做这件事。

HTML5＆lt;详情＆gt; ＆LT;摘要＆gt;标签似乎在结构方面工作得很好（尽管只使用chrome和safari）：

<details>
<summary>About Us</summary>
<p>Some information about us</p>
</details>

唯一的问题是转换是非常苛刻的，但我似乎无法使用CSS转换，因为我想要点击动画，而不是悬停等（加上属性不会改变所以没有什么在...之间过渡。

无论如何这样做，还是只需要掌握Javascript？显然这是下一步，我只是希望有一种方法可以在CSS中实现这一点，这样我就可以尽快使用它。

提前致谢。

Answer 1

如果您有创意，实际上可以使用纯CSS 来完成。

（PS - 我只放了一个<form>包装，以便重置radio按钮，而不会影响多项选择checkbox按钮

Here is a nice example for you

CSS

span, p {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
input[type="reset"] {
    display: block;
    border: 1px solid pink;
    background: maroon;
    color: white;
    padding: 5px;
    margin: 5px;
    font-family: sans;
}
p {
    float: left;
    clear: left;
    overflow: hidden;
    display: table-row;
}
label {
    width: 100%;
    font-size: 200%;
    font-weight: bold;
}
input[type="checkbox"], input[type="radio"] {
    border: none;
    background: transparent;
    display: none;
}
input[type="checkbox"] ~ span, input[type="radio"] ~ span {
    display: block;
    float: left;
    clear: left;
}
input[type="checkbox"]:not(:checked) ~ span, input[type="radio"]:not(:checked) ~ span {
    opacity: 0;
    height: 0;
}
input[type="checkbox"]:checked ~ span, input[type="radio"]:checked ~ span {
    opacity: 1;
    height: auto;
}

HTML

<h1>Singles</h1>
<form id="singles" onsubmit="return false;">
    <p class="option">
        <input type="radio" id="one" name="hard" />
        <label for="one">OneOneOneOne</label> 
        <span><input type="reset" form="singles" value="Hide" />
            If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="radio" id="two" name="hard" />
        <label for="two">TwoTwoTwoTwo</label> 
        <span><input type="reset" form="singles" value="Hide" />
            Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>    
    <p class="option">
        <input type="radio" id="three" name="hard" />
        <label for="three">ThreeThreeThreeThree</label> 
        <span><input type="reset" form="singles" value="Hide" />If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="radio" id="four" name="hard" />
        <label for="four">FourFourFourFour</label> 
        <span><input type="reset" form="singles" value="Hide" />
            Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>
</form>
<h1>Multiples</h1>
<form id="multiples" onsubmit="return false;">
    <p class="option">
        <input type="checkbox" id="one2" name="easy" />
        <label for="one2">OneOneOneOne</label> 
        <span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="checkbox" id="two2" name="easy" />
        <label for="two2">TwoTwoTwoTwo</label> 
        <span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>    
    <p class="option">
        <input type="checkbox" id="three2" name="easy" />
        <label for="three2">ThreeThreeThreeThree</label> 
        <span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="checkbox" id="four2" name="easy" />
        <label for="four2">FourFourFourFour</label> 
        <span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>
</form>

Answer 2

上两节课。每个都有不同的过渡。使用toggleClass将html元素更改为具有所需转换的类。

jQuery toggleClass

它仍然使用javascript，但它只是一个简单的类切换，所以你的动画会更顺畅。

Answer 3

如果您只有少量商品，Deryck的答案最适合您。

然而，如果它是一个很大的数量，Javascript / jQuery是你最好的选择。

如何完成：

jQuery的：

$('.detail').slideUp(); //hides all the details
$('.item').on('click', function({
    $('.detail').slideUp(); //hides any shown details
    $(this).next().toggleSlide(); //shows the details of the item selected
});

HTML：

<div class="item">Item 1</div>
<div class="detail">Details about Item 1</div>
<div class="item">Item 2</div>
<div class="detail">Details about Item 2</div>
<div class="item">Item 3</div>
<div class="detail">Details about Item 3</div>
...

.item表示一个项目，例如常见问题解答，.details表示该项目的扩展，例如常见问题解答的答案。

或者，您可以将.detail嵌套在各自的.item内。

Answer 4

添加到jQuery答案......

将您拥有的内容包含在div中，其ID为“常见问题解答”。将答案换成另一个div，以便您有类似

的内容

<div id="FAQ">
    <section>
        <summary>Question 1</summary>
        <div>
            <p>Some Stuff 1</p><p>Some Stuff 2</p>
        </div>
    </section>
    <!-- Repeat as required -->
</div>

添加以下css以隐藏答案并使section成为块元素

#FAQ section>div
{
    display:none;
}

#FAQ section
{
    display:block;
}

加入j query library，然后在script代码

中加入以下内容

$(document).ready(){
    $("#FAQ summary").click(function(){
        $(this).next("div").slideToggle('slow');
    });
};

在此处查看此行动：http://jsfiddle.net/qu6ef/

这与其他一些解决方案略有不同，只有在再次点击问题时才会隐藏答案。为什么要阻止用户一次看到多个答案？关于这个解决方案的好处是，一旦你包含jQuery

就可以通过5行javascript实现

花点时间查看我在jQuery中使用的内容：

无需Javascript即可创建平滑隐藏/显示动画

4 个答案:

Here is a nice example for you

CSS

HTML