單擊圖像時如何隱藏導航欄

Question

單擊圖像時如何隱藏導航欄？

這是圖像的代碼：

 <a href="gallery/1.png" class="fancybox" rel="ligthbox">
  <img src="gallery/1.png" class="zoom img-fluid">         
 </a>

我不會包含我嘗試過的代碼，因為目前尚不清楚，而且我的JavaScript語言也不好。

對不起，我的英語不好，希望您能理解！

Answer 1

如果您的button類別是btn而navigation bar類別是navbar

使用JavaScript

var btn = document.querySelector('.btn');
btn.onclick = function() {
    var navbar = document.querySelector('.navar');
    navbar.style.display = "none";
}

使用jQuery

$('.btn').on('click', function(event) {
    $('.navar').hide();
});

Answer 2

您需要更正導航欄的z-index，嘗試將z-index值減小到z-index:10