Question

我希望在点击父div之后显示div（当前为display:hidden;），并使用CSS保留在那里。

我目前在使用:active“点击”时显示，但只要我松开鼠标按钮，div就会消失。

如何在点击之后让Div保持原位？

我试过:visited和:focus没有运气，有什么建议吗？

我是新手，所以很确定我在这里犯了一个错误。如果div再次点击父div就会消失，那会更好。

我真的很感谢你的帮助。谢谢。

<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

.container .l-col, .r-col {
display: none;
}

.container {
cursor: pointer;
}

.container:active .l-col {
display: block;
clear: left;
float: left;
width: 50%;
height: 50%;
}

.container:active .r-col {
display: block;
float: right;
width: 50%;
height: 50%;
}

</style>


</head>
<body>
<div id="portfolio" class="container">
<h2>Parent Element</h2>
<div class="l-col">
<h3>Left Col</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="r-col">
<h3>Right Col</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</body>
</html>

Answer 1

使用 - jQuery UI accordion

可以节省大量时间和精力

<script>
$(function() {
        $(".accordion").show().accordion({
            heightStyle: "content",
            collapsible: true,
            active: false,
            animate: {
                duration: 1000,
                easing: 'easeOutBounce'
            },
        });
    })
    </script>

请注意，您可以按照自己喜欢的方式设置此插件的样式，

.accordion {/* some style*/}

.ui-accordion-content {/* some style*/}

.accordion h6 {/* some style*/}

这是一个jsFiddle，展示了我如何滥用手风琴小部件。

Answer 2

CSS没有您正在寻找的功能。你将不得不使用JavaScript。

这里有一些JavaScript可以帮助您入门。将其放在</body>结束标记之前：

<script type="text/javascript">
    document.getElementById("portfolio").onclick = function(){
         this.className = "container-clicked";
    };
</script>

然后为container-clicked类添加样式。

.container-clicked .l-col{
    display:block;
    ...
}
.container-clicked .r-col{
    display:block;
    ...
}

另外，有几点：我相信：访问过psuedo-class不适合你，因为.container不是链接。但是，如果它是一个链接，那么：访问后的样式将在页面刷新后保留，我认为这不是你想要的。

希望这有帮助

Answer 3

您可以使用CSS3动画来实现您的目标，但它不会跨浏览器兼容.IE用户将失去这个..

/* <yourstylesheet>.css */
@keyframes box_appear
{
from {opacity: 0;}
to {opacity: 1;}
}

@-moz-keyframes box_appear/* Firefox */
{
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes box_appear /* Safari and Chrome */
{
from {opacity: 0;}
to {opacity: 1;}
}

@-o-keyframes box_appear /* Opera */
{
from {opacity: 0;}
to {opacity: 1;}
}

.make_me_appear
{
animation: box_appear 5s;
-moz-animation: box_appear 5s; /* Firefox */
-webkit-animation: box_appear 5s; /* Safari and Chrome */
-o-animation: box_appear 5s; /* Opera */
}

<script type="text/javascript">

document.getElementById('<youroutsideelementsidhere>').onclick = function() {
    // Apply the class to the child elements here.
}

</script>

使用CSS单击父div后，使div出现并停留

3 个答案: