让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

你的代码是好的，只是在末尾添加脚本标记。 像我在为你做的小提琴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; 
    } 
} 

然后切换功能buttion

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