0

クリックするとさまざまなコンテンツを切り替えるさまざまなリンクを作成しようとしています:

<section id="slidebox">
    <div id="toggle">
        <a class="bot" href="#">Push me</a>
        <a class="top" href="#slidebox">Push me</a>
    </div>
    <div id="box">    
        Lorem ipsum dolor.
    </div>
</section> 

<section id="slidebox">
    <div id="toggle">
        <a class="bot" href="#">Push me 2</a>
        <a class="top" href="#slidebox">Push me 2</a>
    </div>
    <div id="box">    
        OTHER CONTENT
    </div>
</section>

このための CSS コード:

#toggle {
    height:30px;
    position:relative;
    z-index:2;
}
#toggle a { position: absolute; }

#toggle {
    height:30px;
    position:relative;
    z-index:2;
}
#toggle a { position: absolute; }

#box {
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition: all .4s ease-out;
}

#slidebox:target #box {
    max-height:100px;
    opacity:1;
}

#slidebox:target .top { opacity:0;pointer-events: none;}

セクションごとに列のように水平に繰り返したいのですが、テキスト/コンテンツが異なります。問題は、（ を使用してfloat:left）それを行うときに、別のセクションをクリックすると、最初のセクションのコンテンツがトリガーされて下にスライドすることです。

なぜこうなった？独立した内容で列を並べる方法はありますか? これは私を夢中にさせています！

どうもありがとうございました。

4

1 に答える 1

1

問題は、同じ ID を複数回使用していたことです。それをしないでください。何をしていても問題を引き起こし、間違ったフォームです。代わりにクラスを使用し、ID のみを使用して特定のオブジェクトを取得します

実施例

/* CSS */
.toggle {
    height:30px;
    position:relative;
    z-index:2;
}
.toggle a { position: absolute; }
.box {
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition: all .4s ease-out;
}
.slidebox:target .box {
    max-height:100px;
    opacity:1;
}
.slidebox:target .top { opacity:0; pointer-events: none;}

/* HTML */
<section id="pushOne" class="slidebox">
    <div class="toggle">
        <a class="bot" href="#">Push me</a>
        <a class="top" href="#pushOne">Push me</a>
    </div>
    <div class="box">    
        Lorem ipsum dolor.
    </div>
</section> 

<section id="pushTwo" class="slidebox">
    <div class="toggle">
        <a class="bot" href="#">Push me 2</a>
        <a class="top" href="#pushTwo">Push me 2</a>
    </div>
    <div class="box">    
        OTHER CONTENT
    </div>
</section>
于 2013-09-27T13:16:51.353 に答える