html - 显示/隐藏 div 的所有 CSS 方法

Question

score 1 · Accepted Answer

虽然您已经接受了 JavaScript 解决方案，但（至少）有两种方法可以单独使用 CSS 来实现，第一种使用 CSS:target伪类，第二种使用input, 和label, 元素。

首先，假设 HTML 类似于以下内容：

<div id="faq_container">
    <ol>
        <li id="faq1">
             <h2><a href="#faq1">Question 1</a></h2>

            <div>
                <p>Text, relating to question one.</p> <a class="close" href="#hide">close</a>

                <!-- the above link doesn't link to anything, just changes the hash whcih stops the ':target' pseudo-class matching the the current 'div' element -->
            </div>
        </li>
        <!-- subsequent elements follow the above structure, stripped for brevity -->
    </ol>
</div>

使用下面的 CSS（尽管演示中有更多的 CSS，因为为了简洁起见，我已经去掉了一些纯粹的美学内容，如上所述）：

li {
    /* some stripped out aesthetics */
    position: relative; /* used to position the '.close' links */
}
li div {
    height: 0; /* to allow for animation of the height 'none' to 'block' can't animate */
    overflow: hidden;
    /* all vendor prefixes removed for brevity, here and later */
    transition: all 0.5s linear; /* animates to the default properties, from other 'states' */
}
/* li:target matches when the 'id' of the 'li' is equal to the hash/fragment-identifier in the URL */
li:target div {
    height: 4em; /* to allow for animation (this is the awkward part of using pure CSS) */
    transition: all 0.5s linear; /* transitions to the 'selected' state (when the user clicks a link in the 'h2' element) */
}
li a:link, li a:visited {
    /* aesthetics removed */
}
/* styling the 'interactive' states (:hover, :active, :focus), and the 'selected' state using 'li:target h2 a' */
li a:hover, li a:active, li a:focus, li:target h2 a {
    font-weight: bold;
    text-decoration: underline;
}
a.close {
/* styling the '.close' link, so it's invisible in the 'non-selected' state */
    position: absolute;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.65s linear;
}
/* styling the '.close' link, so it's only visible when the question is 'selected' */
li:target a.close {
    opacity: 1;
    width: 4em;
    transition: all 0.65s linear;
}

JS 小提琴演示。

第二种方法使用label和input元素（type="radio"如果一次只能看到一个问题，type="checkbox"如果可以看到多个元素），基于以下 HTML：

<input id="close" name="question" type="radio" />
<div id="faq_container">
    <ol>
        <li>
            <input id="faq1" type="radio" name="question" />
             <h2><label for="faq1">Question 1</label></h2>

            <div>
                <div>
                    <p>Text, relating to question one.</p>
                    <label for="close">Close</label>
                    <!-- the above 'label' closes the question, by referring to an
                         'input' of the same name (different 'id'), taking advantage
                         of the fact that only one radio-'input' of a given name can
                         be checked (this 'input' is just before the ancestor 'ol') -->
                </div>
            </div>
        </li>
        <!-- subsequent elements follow the above structure, stripped for brevity -->
    </ol>
</div>

以及以下 CSS（和以前一样，为简洁起见删除了美学）：

/* you could, instead, use a class-name to identify the relevant radio-inputs */
input[type=radio] {
    /* using 'display: none' (apparently) in some browsers prevents
       interactivity, so we fake it, by hiding: */
    position: absolute;
    opacity: 0;
    left: -1000px;
}
/* styling the 'div' that's the adjacent-sibling of an 'h2' which is an
   adjacent-sibling of an 'input' all of which are descendants of a 'div' */
div input + h2 + div {
    height: 0; /* to allow for animating with transitions */
    overflow: hidden;
    /* vendor prefixes, again, stripped out */
    transition: all 0.5s linear;
}
/* using 'input:checked + h2 + div' causes problems in Chrome, check the references;
   so we're styling (respectively) a 'div' which is an adjacent sibling to an 'h2'
   which is an adjacent-sibling of a checked 'input', and/or
   a 'div' which is a general-sibling of a checked 'input' (in both cases these are
   all descendants of another 'div' element) */
div input:checked + h2 + div,
div input:checked ~ div {
    height: 4em; /* to allow for animating with transitions */
    overflow-y: auto; /* a personal preference, but allows for
                         scrolling if the height is insufficient
                         though it can be a little ugly, with a flicker */
    transition: all 0.5s linear;
}

JS 小提琴演示。

复选框可以使用相同的方法，它允许label切换相关问题的显示，并使close链接/标签毫无意义，HTML：

<div id="faq_container">
    <ol>
        <li>
            <input id="faq1" type="checkbox" name="question" />
             <h2><label for="faq1">Question 1</label></h2>

            <div>
                <div>
                    <p>Text, relating to question one.</p>
                </div>
            </div>
        </li>
        <!-- subsequent elements follow the above structure, stripped for brevity -->
    </ol>
</div>

和 CSS（与前面的示例完全相同，但更改input[type=radio]为input[type=checkbox]）：

/* duplicated, and aesthetic, CSS removed for brevity */
input[type=checkbox] {
    position: absolute;
    opacity: 0;
    left: -1000px;
}

JS 小提琴演示。

参考：

:target伪选择器。
相邻兄弟 ( +) 组合子。
通用兄弟 ( ~) 组合子。
使用链接的相邻兄弟组合器的问题，特别是在 Chrome 中：“为什么通用兄弟组合器允许切换伪元素的内容，但不允许切换相邻兄弟的内容？ ”

score 0 · Accepted Answer

实现您所要求的最简单的方法归结为在触发它们各自的 OnClick 事件时更改这些 DIV 元素的“类”属性值。为此，您需要使用某种脚本引擎，这很可能是 JavaScript，除非您想要回发，在这种情况下，您可以在页面后面的代码中处理它。正如其他人所提到的，JQuery 是一个不错的选择，但会带来一些开销。

该站点的工作方式是发布您迄今为止尝试过的内容以及获得的结果。我的印象是你没有尝试过任何东西，所以我建议你在这个网站或你选择的网络搜索引擎上搜索“javascript change css class onclick”之类的字符串，看看它会把你带到哪里。

如果没有关于您的确切用例和环境的更多细节，您不太可能得到“在这里，将此代码复制并粘贴到您的页面”类型的答案。

[编辑] 没关系。我总是低估开发人员在了解任何约束之前就开始编写代码的冲动。享受你的copypasta。

score 0 · Accepted Answer

如果允许使用 jQuery 解决方案，这里有一个快速模型。

$(".wrapper").click(function(){
    $(this).children(".answer").toggle();
    $(".wrapper").not(this).toggle();
    $(".faq_container").toggleClass("active");
});

score 0 · Accepted Answer

您应该使用这种结构：

$('.question').on('click', function(ev) {
    ev.preventDefault();
    $(this).find('.answer').show();
});

$('.close').on('click', function(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    var dismiss = $(this).data('dismiss');
    $(this).closest('.'+dismiss).hide();
});

.faq {
    position: relative;
    width: 600px;
}
.question {
    height: 178px; width: 178px;
    margin: 5px;
    padding: 5px;
    border: 1px solid black;
    background: #efefef;
    float: left;
    cursor: pointer;
}
.answer {
    position: absolute;
    top: 0; left: 0;
    height: 578px; width: 578px;
    margin: 5px;
    padding: 5px;
    border: 1px solid black;
    background: #bebebe;
    cursor: default;
    display: none;
}
a.close {
    position: absolute;
    top: 5px; right: 5px;
    display: block;
    height: 20px; width: 20px;
    color: black;
    border: 1px solid black;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}
a.close:hover {
    background: #9f9f9f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="faq">
    <article class="question">Question 1 ?
        <div class="answer">
            Answer 1 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 2 ?
        <div class="answer">
            Answer 2 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 3 ?
        <div class="answer">
            Answer 3 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 4 ?
        <div class="answer">
            Answer 4 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 5 ?
        <div class="answer">
            Answer 5 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 6 ?
        <div class="answer">
            Answer 6 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 7 ?
        <div class="answer">
            Answer 7 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 8 ?
        <div class="answer">
            Answer 8 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
    <article class="question">Question 9 ?
        <div class="answer">
            Answer 9 !
            <a href="#" class="close" data-dismiss="answer">&times;</a>
        </div>
    </article>
</section>

对于 CSS，您需要混合float: left3*3 模式和position: absolute每个答案。

html - 显示/隐藏 div 的所有 CSS 方法

4 回答 4

Related

Reference