显示/隐藏Div的所有CSS方法 [英] All CSS Method for Show/Hide Divs

查看：117
本文介绍了显示/隐藏Div的所有CSS方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



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



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



谢谢！

解决方案

当您接受JavaScript解决方案时，至少有两种方法可以单独使用CSS来实现，第一种方法是使用CSS ：target 伪类，第二个使用输入和标签，元素。



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

 < div id =faq_container> 
< ol> 
< li id =faq1> 
< h2>< a href =＃faq1>问题1< / a>< / h2> 
 
< div> 
< p>文本，与问题1相关。< / p> < a class =closehref =＃hide>关闭< / a> 
 
<！ - 上面的链接没有链接到任何东西，只是更改哈希值，停止匹配当前'div'元素的'：target'伪类 - > 
< / div> 
< / li> 
 <！ - 后续元素遵循上述结构，为了简洁而剥离 - > 
< / ol> 
< / div>

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

  li {
 / *一些剥离了美学* / 
职位：亲属; / *用于定位'.close'链接* / 
} 
 li div {
 height：0; / *允许高度'none'到'block'的动画无法动画* / 
 overflow：hidden; 
 / *为简洁起见，删除所有供应商前缀* / 
转换：所有0.5s线性; / *动画到默认属性，从其他'状态'* / 
} 
 / * li：目标与'li'的'id'等于散列/片段标识符时匹配URL * / 
 li：target div {
 height：4em; / *允许动画（这是使用纯CSS的尴尬部分）* / 
过渡：全部0.5s线性; / *转换到'selected'状态（当用户点击'h2'元素中的链接时）* / 
} 
 li a：link，li a：visited {
 / *删除美学* / 
} 
 / *使用'li：target h2 a'* / $ b设置'交互'状态（：hover，：active，：focus）和'selected'状态$ b li a：hover，li a：active，li a：focus，li：target h2 a {
 font-weight：bold; 
 text-decoration：underline; 
} 
 a.close {
 / *样式化'.close'链接，所以它在'非选择'状态下是不可见的* / 
 position：absolute; 
不透明度：0; 
宽度：0; 
溢出：隐藏; 
过渡：所有0.65s线性; 
} 
 / *样式化'.close'链接，因此仅当问题被选中时才会显示* / 
 li：target a.close {
 opacity：1 ; 
宽度：4em; 
转换：所有0.65s线性; 
}

label 和输入元素（ type =radio如果只有 one 问题可以在一个时间， type =复选框如果多个元素可见），基于以下HTML： 

 < input id =closename =questiontype =radio/> 
< div id =faq_container> 
< ol> 
< li> 
< input id =faq1type =radioname =question/> 
< h2>< label for =faq1>问题1< / label>< / h2> 
 
< div> 
< div> 
< p>文本，与问题1相关。< / p> 
< label for =close>关闭< / label> 
<！ - 上面的'label'通过引用同名的
'输入'（不同的'id'）来关闭这个问题，利用
的事实只有一个给定名称的radio-'input'可以检查
（这个'输入'就在祖先'ol'之前） - > 
< / div> 
< / div> 
< / li> 
 <！ - 后续元素遵循上述结构，为了简洁而剥离 - > 
< / ol> 
< / div>

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

  / *您可以使用类名来识别相关的无线电输入* / 
输入[type = radio] {
 / *在某些浏览器中使用'display：none'（显然）可以防止
的交互性，所以我们伪装它，通过隐藏：* / 
 position：absolute; 
不透明度：0;剩余
：-1000px; 
} 
 / *样式'div'是'h2'的邻近兄弟，它是
'输入'的邻近兄弟，所有这些都是'div'的后代'* / 
 div输入+ h2 + div {
身高：0; / *允许使用转换进行动画处理* / 
 overflow：hidden; 
 / *供应商前缀，再次剥离* / 
转换：所有0.5s线性; 
} 
 / *使用'input：checked + h2 + div'会导致Chrome出现问题，请检查引用; 
因此我们（分别）造型为'div'，它是'h2'
的相邻兄弟，它是已检查'输入'的邻近兄弟，和/或
a 'div'是检查'输入'的一般兄弟（在这两种情况下，这些都是
所有后代'div'元素的后代）* / 
 div输入：checked + h2 + div，
 div输入：checked〜div {
 height：4em; / *允许使用过渡动画* / 
 overflow-y：auto; / *个人喜好，但如果高度不足
，则允许
滚动，尽管它可能有点丑陋，闪烁* / 
转换：所有0.5s线性; 
}

JS小提琴演示。



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

 < div id =faq_container> 
< ol> 
< li> 
< input id =faq1type =checkboxname =question/> 
< h2>< label for =faq1>问题1< / label>< / h2> 
 
< div> 
< div> 
< p>文本，与问题1相关。< / p> 
< / div> 
< / div> 
< / li> 
 <！ - 后续元素遵循上述结构，为了简洁而剥离 - > 
< / ol> 
< / div>

和CSS（正如前面的例子，但更改输入[type =收音机] 到输入[type =复选框] ）：

  / *重复，审美，CSS为简洁而删除* / 
输入[type = checkbox] {
 position：absolute; 
不透明度：0;剩余
：-1000px; 
}

JS Fiddle演示。



参考文献：


  • ：target 伪选择器。

  • 相邻兄弟（ + ）组合子。

  • General-sibling（〜）组合子。

  • 使用链式相邻兄弟组合器的问题，特别是在Chrome中：为什么通用兄弟组合器允许切换伪元素的内容，而不是相邻兄弟？

    • ul>

    I am setting up a FAQ page. On the page I have a div, of class="faq_container", with 6 child divs arranged in a 3×3 grid that contain the faq questions. So basically I have 6 clickable boxes.

    Each question, when clicked, will reveal its answer hiding the all the questions but maintained within the faq_container div. There would be a close link below the answer to hide the answer and take you back to the questions.

    I know this is probably pretty simple. I’m hoping someone can help me out.

    Thanks!

    解决方案

    While you've accepted a JavaScript solution, there are (at least) two ways that this can be achieved with CSS alone, the first using CSS :target pseudo-classes, and the second using input, and label, elements.

    The first, assuming HTML similar to the following:

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

    With the following CSS (albeit there's more CSS in the demo, since I've stripped out some of the purely aesthetic stuff here, for brevity, as above):

    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 Fiddle demo.

    The second approach uses label and input elements (type="radio" if only one question can be visible at a time, type="checkbox" if multiple elements can be visible), based on the following 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>

    And the following CSS (as before, aesthetics removed for brevity):

    /* 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 Fiddle demo.

    The same approach can be used with checkboxes, which allows the label to toggle the display of the relevant question, and makes the close links/labels pointless, 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>

    And CSS (precisely as the preceding example, but changed input[type=radio] to input[type=checkbox]):

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

    JS Fiddle demo.

    References:

    这篇关于显示/隐藏Div的所有CSS方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆