CSS 折叠/展开 div

Question

<style>
    .faq ul li {
        display: block;
        float: left;
        padding: 5px;
    }

    .faq ul li div {
        display: none;
    }

    .faq ul li div:target {
        display: block;
    }
</style>
<div class="faq">
    <ul>
        <li><a href="#question1">Question 1</a>
            <div id="question1">Answer 1 </div>
        </li>
        <li><a href="#question2">Question 2</a>
            <div id="question2">Answer 2 </div>
        </li>
        <li><a href="#question3">Question 3</a>
            <div id="question3">Answer 3 </div>
        </li>
        <li><a href="#question4">Question 4</a>
            <div id="question4">Answer 4 </div>
        </li>
        <li><a href="#question5">Question 5</a>
            <div id="question5">Answer 5 </div>
        </li>
        <li><a href="#question6">Question 6</a>
            <div id="question6">Answer 6 </div>
        </li>
    </ul>
</div>

我发现了这个很棒的链接http://jsfiddle.net/ionko22/4sKD3/，它涉及使用CSS的可折叠

。当您访问页面时，有没有办法让问题1始终处于打开状态而无需单击它？并且在单击其他任何问题时使其折叠。 此外，有没有一种方法通过单击自身来关闭

/问题？ 如果您能回复我，我将非常感激。

- Ray

---

你可以使用单选按钮来显示第一个问题，就像这样。虽然这种方法不能用于折叠... - cocoa

Answer 1

http://jsfiddle.net/4sKD3/821/

将以下代码添加到CSS中，使第一个问题默认显示：

.faq ul li:first-of-type div {
    display: block;
}

并添加以下 jQuery 代码以进行切换：

$(".faq ul li").click(function() {
    if( $( this ).children( "div" ).css( "display" ) == "none" ) {
        $( ".faq ul li div" ).hide();
        $( this ).children( "div" ).show();
    } else {
        $( ".faq ul li div" ).hide();
    }
});

- DivideByZero

---

我认为他对只使用CSS印象深刻，并且我认为他想保持这种方式。 - Carlos H Romano

仅使用CSS能否实现？您无法通过CSS检查元素是否被点击，对吗？ - DivideByZero

@chromano，没有办法让它在页面加载时仅打开（默认情况下），然后关闭，除非您使用了一些不祥的选择器，例如:first-of-type:focus，然后使元素获得焦点。CSS是关于在x位置进行样式设置的，而JS旨在帮助实现交互性，这显然是一个交互性问题。 - Daemedeor

Answer 2

我已经用first-child、.current、:not语法以及各种类组合进行了两个小时的尝试。我认为可以肯定地说，仅使用纯的CSS和HTML来显示第一个

并在另一个

是:target时使其消失是不可能的。

我已经将第一个问题设置为display: block;，而其他所有问题都会在另一个问题处于活动状态时打开和关闭，但是第一个问题始终处于活动状态。

因此，回答您的问题：

不，我有95%的把握说它不能在上面的标记中实现，因为每个

都在自己独立的

中。我希望我能证明自己错了，但我做不到。如果有人能够实现这一点，他们肯定会得到我的赞成。

- Filthy_Rich