Saya telah mencari ini tetapi pengetahuan javascript saya sangat mendasar sehingga saya mungkin melewatkan jawabannya.

Saya memiliki galeri gambar yang ingin saya lihat secara default di desktop. Saat dilihat di ponsel, saya ingin galeri itu disembunyikan secara default, tetapi masih terlihat jika tombol diklik.

Saya telah membuat bagian seluler, menggunakan beberapa kode yang saya miliki untuk navigasi seluler. Bagian itu berfungsi dengan baik ... tapi jelas karena tombol dan div galeri gambar saya disetel ke "tidak menampilkan" secara default, itu tidak akan muncul di desktop. Tapi saya tidak tahu bagaimana membuat kedua hal itu terjadi dengan konten yang sama.

Bagaimana saya bisa membuatnya terlihat di desktop, dan sakelar opsional di seluler? Terima kasih!

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

J:

function toggleGallery() {
var x = document.getElementById('image-gallery');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
0
sterlingcooper 7 Agustus 2017, 23:16

2 jawaban

Jawaban Terbaik

Kode Anda baik-baik saja, cukup tambahkan tag skrip di bagian akhir. Seperti di biola yang saya buat untuk Anda di sini

ToggleGallery() tidak didefinisikan.

<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>

Di sini Anda memiliki jawaban yang dijelaskan dengan baik tentang menempatkan tag skrip di akhir HTML

0
Balaji.J.B 26 Juli 2018, 06:56

Ini akan disembunyikan di Perangkat Layar Kecil dan terlihat di layar dengan lebar lebih dari 767px. css:

#image-gallery {
display: none;
}

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

Lalu fungsi sakelar untuk tombol

function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}
0
Sagun Gautam 7 Agustus 2017, 20:30