divをデスクトップで表示し、モバイルでの表示を切り替えます

Question

これを検索しましたが、javascriptの知識は非常に基本的なので、私は答えを見逃している可能性があります。

デスクトップにはデフォルトで表示されるイメージギャラリーがあります。モバイルで見ると、そのギャラリーはデフォルトでは隠されていますが、ボタンをクリックすると表示されます。

モバイルナビゲーション用に用意したコードを使用してモバイル部分を作成しました。その部分はうまくいきます...しかし、明らかに、私のボタンと画像ギャラリーのdivはデフォルトでは "表示なし"に設定されているので、デスクトップには表示されません。しかし、私は両方のことが同じ内容で起こるようにする方法を知らない。

デスクトップではどのように表示し、モバイルではオプションの切り替えができますか？ありがとう！

HTML: 

<div class="container"> 
<button onclick="toggleGallery()">Click to view images</button> 
    <p>I want the hidden image-gallery div to show up here despite being display none.</p> 
    <div id="image-gallery" style="display:none;"> 
     <ul> 
      <li>Image 1</li> 
      <li>Image 2</li> 
      <li>Image 3</li> 
      </ul> 
     </div> 
</div><!--container--> 

CSS：

#image-gallery { 
display: block; 
width: 600px; 
border: 1px solid black; 
} 

#image-gallery li { 
width: 150px; 
height: 150px; 
color: white; 
text-align: center; 
margin: 10px; 
background-color: gray; 
display: inline-block; 
} 

button { 
display: none; 
} 

@media (max-width: 600px) { 

#image-gallery { 
display: block; 
width: 100%; 
} 

button { 
display: block; 
} 

#image-gallery li { 
border: 1px solid red; 
} 
} 

JS：

function toggleGallery() { 
var x = document.getElementById('image-gallery'); 
if (x.style.display === 'none') { 
x.style.display = 'block'; 
} else { 
x.style.display = 'none'; 
} 
} 

Answer 1

buttionためには、ちょうど最後にスクリプトタグを追加します。 あなたのために作ったフィドルのようにhere

toggleGallery（）は分解されませんでした。

<div class="container"> 
    <button onclick="toggleGallery()">Click to view images</button> 
    <p>I want the hidden image-gallery div to show up here despite being display none.</p> 
    <div id="image-gallery"> 
    <ul> 
     <li>Image 1</li> 
     <li>Image 2</li> 
     <li>Image 3</li> 
    </ul> 
    </div> 
</div> 
<!--container--> 
<script> 
function toggleGallery() { 
var x = document.getElementById('image-gallery'); 
if (x.style.display === 'none') { 
x.style.display = 'block'; 
} else { 
x.style.display = 'none'; 
} 
} 

</script> 

Hereあなたはメディアクエリを使用することができ、HTML

Answer 2

これは、スモールスクリーンデバイスに隠され、767px幅よりも大きい画面に表示されます。 CSS：

#image-gallery { 
display: none; 
} 

@media (min-width:767px){ 
    #image-gallery { 
    display: block; 
    } 
} 

その後、トグル機能あなたのコードはOKだった

function toggleDiv(id) { 
    var div = document.getElementById(id); 
    div.style.display = div.style.display == "none" ? "block" : "none"; 
}