web-dev-qa-db-ja.com

ボタンをクリックして非表示のdivを上下にスライドさせる方法は？

このタイプのスライドダウンを実現したいのは、ホバーするのではなく、クリックでスライドダウンをトリガーし、もう一度クリックして逆のスライドトリガーをトリガーするスクリプトの種類が必要だと思います。私はdiv thatsを非表示にし（上部：-400px、ページの上部）、ボタンがクリックされたときにスライドダウンして上部に配置します：0;

HTML

<div class="container"><div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>
</div>

CSS

.container {
overflow:hidden;
height: 60px;
}

.one {
position: relative;
top: 0;
background-color: lightblue;
z-index: 1;
}

.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}

.one:hover + .two {
top: 0px;
}

これが実際のフィドルです http://jsfiddle.net/8ZFMJ/2/ -どんな助けでもいただければ幸いです。

私はslideToggleを使ってみましたが、これは私が達成したいスライドダウンのタイプではない「拡大」効果を作成します。

どうもありがとう。

jqueryhtmlcssanimationslide
8
user2498890

これを試してください http://jsfiddle.net/webcarvers/8ZFMJ/34/

これを削除してください：

.one:hover + .two {
    top: 0px;
}

これをjQuery Jsで追加します

$(document).ready(function(){
var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "-40px"});
    }
});
});
12
Mayank Tripathi

ほぼ同じ（他の回答と同じ）で、複数のコンテナーがある場合にも機能します。

http://jsfiddle.net/8ZFMJ/32/

$('.one').on('click',function(){
    $(this).next('.two').slideToggle();
});
6
caramba

slideToggle（）を使用できます。

$('.one').click(function() {
    $('.two').slideToggle();    
})

フィドルデモ

2
Felix

.slideToggle() を使用する必要があります

$(".one").on('click',function(){
    $(".two").slideToggle();
});

デモ

1
Dhaval Marthak

JQueryのslideToggle（）関数を使用する必要があると思いますが、それを試しましたか？

1
b4rbika

純粋なCSSを使用してそれを行うことができます： http://jsfiddle.net/8ZFMJ/33/

HTML：

<div class="container">
    <a href="#" class="one">Hover me to reveal new div</a>
    <div class="two">
        I slid!<br>
        And I am higher than the div before me...
    </div>
</div>

CSS：

.one:focus + .two {
    top: 0px;
}

好みに合わせてリンクのスタイルを削除することもできるため、通常のテキストのように見えます。

0
Kroltan