1

クリック機能によって非表示のコンテンツがアクティブ化された4つのモジュール。画像またはlorem段落をクリックするだけで、非表示のコンテンツが表示されます。

http://codepen.io/anon/pen/Gvcxd

最終的に、これはレスポンシブデザイン用です。したがって、列の数は、ビューポートのサイズと各モジュールのメディアクエリ定義からの幅に応じて変化します。

他の列のモジュールが移動しないように、このスクリプトを変更したいと思います。つまり、「ONE」をクリックすると、下にあるので「THREE」だけ移動します。「TWO」と「FOUR」は静的なままである必要があります。

単純に次のようになります。

1 2         ( <---This is a faux-row, since it's not coded to be a row)
3 4

2のトグルをクリックすると、次のようになります（非表示のコンテンツの場合はH）。

1 2
  H
3 4

3が押し下げられたので、これは発生しないはずです。代わりに、私はそれをこれだけにしたい：

1 2
3 H
  4

クリック機能がその下の偽の列にのみ影響するように、このトグルスクリプト機能を使用することは可能ですか？

4

2 に答える 2

2

基本的に記事をその下の要素の上にスライドさせたいだけなので、z-indexを使用してこれを行うことができます。

上でレイアウトした基本的なパターンを使用して、この簡単な例をまとめました。あなたはそれをあなたがしていることに少し正確に適応させる必要があるでしょう、しかしそれは概念を示しました。

HTML

<div id="wrapper">
    <div id="one" class="main-block">ONE
        <div class="article">blah blah blah</div>
    </div>
    <div id="two" class="main-block">TWO
        <div class="article">blah blah blah</div>
    </div>
    <div id="three" class="main-block">THREE
        <div class="article">blah blah blah</div>
    </div>
    <div id="four" class="main-block">FOUR
        <div class="article">blah blah blah</div>
    </div>
    <div id="five" class="main-block">FIVE
        <div class="article">blah blah blah</div>
    </div>
    <div id="six" class="main-block">SIX
        <div class="article">blah blah blah</div>
    </div>
</div>

CSS

.main-block {
    position: relative;
    float: left;
    z-index: 1;
    height: 50px;
    width: 75px;
}
.article {
    position: absolute;
    width: 50px;
    z-index: 2;
}
#wrapper {
    position: relative;  
    width: 150px;    
}

JQuery

$('.article').hide();

$('.main-block').click(function() {
    $(this).children('.article').slideToggle('slow');
});

このjsfiddleで遊ぶこともできます

于 2012-09-26T02:17:13.370 に答える
0

私があなたを正しく理解している場合はvisiblity: hidden、使用するのではなく切り替えることができるdisplay: noneので、要素は引き続きDOMなどにありますが、完全に透過的になります。

https://developer.mozilla.org/en-US/docs/CSS/visibility

于 2012-09-25T20:04:42.507 に答える