1

我希望display:hidden;在单击父 div 后出现一个 div（当前），并使用 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>
4

3 回答 3

1

使用jQuery UI 手风琴可以节省大量时间和精力

<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，它显示了我如何滥用手风琴小部件。

于 2013-03-26T22:27:56.577 回答
0

您可以使用 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>
于 2013-03-27T02:18:40.627 回答
0

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;
    ...
}

另外，有几点：我认为 :visited 伪类对您不起作用，因为 .container 不是链接。但是，如果它是一个链接，那么 :visited 样式将在页面刷新后保留，我认为这不是您想要的。

希望这可以帮助

于 2013-03-26T22:22:27.293 回答