2017-01-12 10 views
0

@mediaを使用している画面解像度CSSのためにボタンが隠された後に、既にボタンによって隠されていたdiv/classをどのように表示しますか?これはボタンのコードです:隠しボタンの後にdivを再表示するにはどうすればいいですか?

<script> 
var button = document.getElementById('answer'); 

function showDiv() { 
    var div = document.getElementById('displayfilter'); 

    if (div.style.display !== 'none') { 
    div.style.display = 'none'; 
    } 
    else { 
    div.style.display = 'block'; 
    } 
}; 
</script> 

ここでは、画面解像度のCSSです。

@media only screen and (max-width: 1026px) { 

    .displayfilter { 
    display: none; 
    } 

    .answer { 
    display: block !important; 
    } 
} 

上記の操作は、画面が通常のサイズに戻されるまで有効です。ありがとう!

+1

あなたは、「文法的に正しい」最も紛らわしい質問がここに与えられます! –

+0

言葉にするのはとても難しかった! Haha apologies .. – Midas

+0

あなたは、私たちに期待される行動を教えてください。それが現れているので、私たちはあなたが何をしようとしているのかを推測することしかできません。 –

答えて

1

ページは1026年より広くリサイズされ、divのは、それを表示し、その後隠されている場合、私は、正しく質問を理解している場合:

window.onresize = function(event) { 

    if (window.innerWidth > 1026 && div.style.display == 'none') { 
    div.style.display = 'block'; 
    } 

}; 
+0

はい、それが機能するにはdivを変更する必要がありますか? – Midas

+0

showDiv()関数の外に変数を割り当てると、この変数のように他の関数で使用できるようになります。 – Alvaro

+0

ありがとうございました@Alvaroは完璧に働きました。あなたが私の混乱しやすい質問を理解することができてうれしい! – Midas

0

あなたは大画面で、デフォルトではdiv要素を表示したい場合は、あなたがする必要がありますそのように、displayfilterクラスを取り、メディアクエリのそれではなく外display:block;を追加します。

.displayfilter { 
    display: block; 
} 

を[デバイス幅]が[指定された#]以下の場合は、を言っている時点では、その後、行う {...} 。指定したデバイスの幅は1026pxです。スタイルシートに表示されないようにスタイルシートにデフォルトで表示するようには指定していません。

+0

これは既にデフォルトで表示されていますが、ボタンを非表示にして画面のサイズを変更するとボタンは表示されなくなりますが、 "displayfilter"はまだ隠されています – Midas

+0

@Midas It別のボタンを押してdivをトリガしてもう一度表示するなど、divを再び表示させるには何かが必要なように思えます。ユーザーからの入力なしで画面のサイズが変更されたときにボタンを表示しますか? –

+0

divではなく、ボタン – Midas

関連する問題