讓div在桌面上可見，在手機上切換可見性

我已經搜索了這個，但我的JavaScript知識非常基本，所以我可能錯過了答案。讓div在桌面上可見，在手機上切換可見性

我有一個圖像庫，我希望在桌面上默認可見。在移動設備上查看時，我希望該圖庫默認處於隱藏狀態，但如果單擊按鈕仍然可見。

我已經創建了移動部分，使用我用於移動導航的一些代碼。這部分工作正常......但很明顯，因爲我的按鈕和圖像庫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'; 
} 
}

來源

2017-08-07 sterlingcooper

您可以使用媒體查詢結束puuting腳本標記一個很好的描述答案。 –

你的代碼是好的，只是在末尾添加腳本標記。像我在爲你做的小提琴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

來源

2017-08-07 20:38:06 TalGabay

謝謝！這很好。唯一的問題是我必須在移動設備上點擊兩次按鈕才能打開它。只需點擊一下，我就可以做到這一點嗎？無論哪種方式，我都可以繼續這個。 – sterlingcooper

更新：我把我的畫廊包裹在另一個div中，包括一個「關閉窗口」按鈕，然後添加一些js來關閉div並刷新頁面，以便該人可以重新開始。 – sterlingcooper

太棒了！如果您將此答案標記爲正確的答案將會很好 – TalGabay

它會被隱藏在小屏幕設備和屏幕比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"; 
}

來源

2017-08-07 20:30:37 gudboisgn

感謝gudboisgn，我用TalGabay的方法解決了我的問題，但是您的代碼也可能有助於我雙擊打開問題。唯一的問題是打開後無法再關閉它。 – sterlingcooper

讓div在桌面上可見，在手機上切換可見性

回答

相關問題