使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;
} 
} 

联署材料：

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

Answer 1

您的代码没有问题，只需在末尾添加脚本标记即可。就像我为你做的小提琴，这里

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>

这里您有一个关于将脚本标记放在HTML末尾的详细说明的答案。

Answer 2

它将隐藏在小屏幕设备和可见屏幕大于767 be宽度。css：

#image-gallery {
display: none;
}

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

然后，按钮的切换函数

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