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>

我发现这个关于使用CSS的collapsible div的链接http://jsfiddle.net/ionko22/4sKD3/很棒。有没有办法让问题1始终打开，而不是在您访问页面时单击它。当你点击任何其他问题时，它会崩溃。还有一种方法可以通过点击自己来close div / questions吗？如果你能回复，我将非常感激。

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();
    }
});

Answer 2

我现在使用first-child，.current，:not语法和各种类组合，已经玩了两个小时了。我认为可以安全地说，显示第一个div开头，然后让另一个是:target，只有纯 CSS才能消失HTML。

我得到的第一个问题是display: block;，所有其他问题在另一个活跃时开始和结束，但第一个问题始终是活跃的。

所以，回答你的问题：

不，我95％肯定上面的标记是不可能的，因为每个div都在它自己的个人li中。我希望我能证明自己是错的，但我不能。如果其他人能够做到这一点，那么他们肯定会得到我的投票。

CSS崩溃/扩展div

2 个答案: