1

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

3 に答える 3

1

-jQueryUIアコーディオンを使用すると多くの時間と労力を節約できます

<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

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

また、いくつかのポイント：.containerはリンクではないため、：visitedpsuedo-classは機能していないと思います。ただし、それがリンクの場合、：visitedスタイルはページが更新された後も残ります。これは、あなたが探しているものではないと思います。

お役に立てれば

于 2013-03-26T22:22:27.293 に答える
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 に答える