2016-12-22 20 views
3

は、私は非表示にし、divのダウン/表示する必要がありませんが、:jqueryの「表示/非表示」JavaScriptでdiv要素ではない、としない表示と:なし

  • それはjQueryを使ってすることはできません。ので、 ()、toggle()、slideTogle()、フェード、アニメーションなど、それらはすべてdisplay:noneを使用し、DOMのスペースを使ってdivを必要とします(私はそこにあるものを処理します)。

ティル今、私は唯一のdiv要素はスタイルの可視性を得ることを行わ:いくつかの「切り替え」ボタンをclickinことで、隠されたブロックを、それは[OK]を動作しますが、私は、ディスプレイ上のいくつかの効果を追加する方法がわかりません、 togle( 'slow')のように。

マイCSS:

.show, .show * { 
    visibility: inherit !important; 
} 

.hide, .hide * { 
    visibility: hidden !important; 
} 

私は、/ JSに反応:

toggleCharts:function(){ 
    //$("#chartBox").toggle(); 
    if (this.state.className === 'hide') 
     this.setState({className: 'show'}); 
    else 
     this.setState({className: 'hide'}); 
} 

本部を非表示にする:

<div id="chartBox" className={this.state.className}></div> 

答えて

2

-であるとして、あなたのリアクト/ jQのをしてください、しかし、ショーと不透明度でフェードするなど、CSSトランジションで要素を非表示にする:

.show { 
    opacity: 1 !important; 
    transition: opacity .5s; 
} 

.hide { 
    opacity: 0 !important; 
    transition: opacity .5s; 
} 
+0

私はそれを見てみましょう。 – pmirnd

+0

作品1つの理由を除いて、99%の偉大さ、divの子要素の1つが黒色に着色されていますが、なぜそれを確認する必要があります。 (私が言ったように、私はjqueryを使いたくない...) – pmirnd

+0

@pmirnd子供がもともと不透明で半透明であった可能性はありますか?実際には '、.show *'と '、.hide *'の規則は必要ありません。なぜなら親要素の隠蔽/表示は十分であるからです。私は自分の答えを更新しました。 –

1

try:

+0

これはjQueryではないと言っていますが、おかげで(うまくいきませんでした) – pmirnd

+0

はい、問題は 'display:none'でした。この場合、表示プロパティは次のようになります。タッチされず、不透明度のみが変更される – Taki

関連する問題