2017-04-23 11 views
2

HTMLをクリックしてくださいそれは "下"と表示されます。次のクリックで、私は再びそれが隠されるようにしたい。更新の可視性は、

複数のHTML要素が同時に画面に表示されるため、要素を直接選択することはできませんが、親、子、兄弟関係の組み合わせを使用する必要があります。 jqueryの現在のメソッドを試しましたが、成功しませんでした。

クラスクイックスタートでdivをクリックすると、非表示のクラスでdivを選択し、視認性を前後に切り替えるにはどうすればよいですか?

答えて

1

第一に、あなたは、統計クラスを追加するのを忘れ、私はあなたがコンテナクラスでトップの要素を取得するために連鎖する必要はありません

<div class="stats ui bottom attached block secondary clearing segment hidden"> 
    <p>bottom</p> 
</div> 

第二の下にこれを追加しました見...あなたは以下のように行うことができます... 最も近い機能は、あなたが探している要素にその方法を見つけるだろう...

var statBar = $(this).closest('.container').find(".stats"); 

だから、基本的にはこれらの2つの小さな変更... 統計情報を非表示にして表示し、連鎖を取り除きたい要素に追加します。

2

文の代わりに、statBar.toggle();を使用して、表示または非表示にすると非表示にすることができます。

トグルスライドアニメーションでこれを使用したい場合は、常により涼しいstatBar.slideToggle();を使用できます。独自のコードでそれをまとめると

$('.quickstats').on('click', function(){ 
    $(this).closest('.extra').closest('.item').closest('.segment').closest('container').find('.stats'); 
    statBar.toggle(); 
}); 

重要:あなたのCSSでhiddenクラスを変更することを忘れないでください - jQueryのdisplayプロパティ上で動作するので、ないvisibility、最初に非表示にする場合は、要素をdisplay:noneと設定します。一般に、ではなく、visibilityを使用してください。

Read more about toggle()。すべての