在photoswipe图像上单击隐藏导航栏（bootstrap）

Question

就像你可以在图片中看到的那样，当我在PhotoSwipe的图库视图中时，我的导航栏仍然可见。我真的不知道这是怎么发生的。

＆＃13;

＆＃13;

<header>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="navbar-header">
        <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>

      <!-- Header Menu Bar
				================================================== -->
      <div id="nav-main" class="navbar-collapse collapse">
        <ul id="top-menu" class="nav navbar-nav main-nav">
          <li>
            <a class="activeNav" href="#home"> <span class="icon icon-home"></span> STARTSEITE</a>
          </li>
          <li>
            <a href="#page-1"> <span class="icon icon-user"></span> ABOUT ME</a>
          </li>
          <!-- etc.. -->
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <!-- /.navbar -->
</header>

＆＃13;

＆＃13;

＆＃13;

Gallery / Photoswipe初始化为1：1，就像文档中的模板一样。我记得当导航栏有问题的时候它有效。

隐藏导航栏的最简单方法是什么？我不能以某种方式切换PhotoSwipe上的导航栏点击并在离开时将其切换回来吗？

Answer 1

这通常是由类.navbar-fixed-top的z-index引起的值高于photoswipe背景类.pswp，最好的办法是检查浏览器中的photoswipe元素并增加z- photoswipe背景索引或降低bootstrap navbar-fixed-top的z-index。

.pswp {
    z-index: 2500;
}