Question

我正在设置常见问题解答页面。在页面上，我有一个div，class=”faq_container”，其中有6个子div以3×3网格排列，其中包含常见问题解答。所以基本上我有6个可点击的框。

每个问题在点击时都会显示其答案，隐藏所有问题但保留在faq_container div中。答案下面会有一个紧密的链接隐藏答案并带你回到问题。

我知道这可能很简单。我希望有人可以帮助我。

谢谢！

Answer 1

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

第一个，假设HTML类似于以下内容：

label

使用以下CSS（尽管演示中有更多的CSS，因为我在这里删除了一些纯粹的美学内容，为简洁起见，如上所述）：

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

JS Fiddle demo

第二种方法使用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; }和label元素（input，如果一次只能看到一个问题，type="radio"如果多个基于以下HTML，可以看到元素：

type="checkbox"

以下的CSS（如前所述，为了简洁而删除了美学）：

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

JS Fiddle demo

同样的方法可以与复选框一起使用，这允许/* 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; }切换相关问题的显示，并使label链接/标签毫无意义，HTML：

close

和CSS（正如前面的示例，但将<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>  </ol> </div>更改为input[type=radio]）：

input[type=checkbox]

JS Fiddle demo

参考文献：

:target pseudo-selector。
Adjacent-sibling (+) combinator。
General-sibling (~) combinator。
使用链式相邻兄弟组合器的问题，特别是在Chrome中：“Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?”

Answer 2

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

此网站的工作方式是您发布到目前为止您尝试过的内容，以及您获得的结果。我得到的印象是你没有尝试任何东西，所以我建议你在这个网站或你的网络搜索引擎上搜索一下像“javascript change css class onclick”这样的字符串，看看它引导你的位置。< / p>

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

[编辑]没关系。我总是低估开发人员在知道任何约束之前开始编写代码的强迫性。享受你的copypasta。

Answer 3

如果允许使用jQuery解决方案，here是一个快速模型。

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

Answer 4

你应该使用这种结构：

$('.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，您需要为您的3 * 3模式混合float: left，并为每个答案混合position: absolute。

显示/隐藏Div的所有CSS方法

4 个答案: