Bootstrap 侧边导航不显示答案

【问题标题】：Bootstrap Side navigation not showingBootstrap 侧边导航不显示
【发布时间】：2017-09-27 09:26:06
【问题描述】：

我为我的一页模板使用了引导侧导航，如下所示：

 <head> 
 <script> jQuery(document).ready(function(e){ $('#mySidenav ul li a').on('click', function(e){
            $(".sidenav").hide();  });  }); </script>
    
    <script type="text/javascript"> <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        } //--> </script> 
        </head>
    
    
    Nav div code
    
 <nav> 
    <div id="mySidenav" class="sidenav">   
    <a href="javascript:void(0)" class="closebtn" onClick="closeNav()">&times;</a>   
    <ul>   
    <li><a href="#about">About</a></li>   
    <li><a href="#service">Services</a></li>   
    <li><a href="#testimonial">Testimonial</a></li>   
    <li><a href="#map">Map</a></li>   <li><a href="#contact">Contact</a></li>   
    </ul>   
    <div class="ad"><img src="assets/images/ad.jpg" alt="ad">
    </div> 
    </div> 
    <span style="font-size:30px;cursor:pointer" onClick="openNav()" class="open">&#9776;</span> 
    <script> function openNav() {
        document.getElementById("mySidenav").style.width = "250px"; }
    
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0"; } 
        </script> 
 </nav>

下次访问页面的某个部分时菜单不显示？？我该怎么办？？任何解决方案。我只想在单击链接而不是整个导航 div 时显示部分。谢谢！！

【问题讨论】：

您好，欢迎来到 StackOverflow。请参考stackoverflow.com/help/how-to-ask，了解如何提出正确的问题并根据指南改进您的问题。
您好，是否可以在单击同一 div 中的锚链接时隐藏 div，再次访问链接后可以显示 div？

标签： jquery twitter-bootstrap

【解决方案1】：

试试下面的方法。

$('#mySidenav a').click(function(event) {
  event.preventDefault();
  var hash = this.hash;
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800);
  closeNav();
});


function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openNav {
  font-size: 30px;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
}

.section {
  width: 100%;
  height: 100vh;
  padding-top: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div id="mySidenav" class="sidenav"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
    </a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#clients">Clients</a>
    <a href="#contact">Contact</a></div>
  <span class="openNav" onclick="openNav()">&#9776;
    open</span>
  <div id="about" class="section">About</div>
  <div id="services" class="section">Services</div>
  <div id="clients" class="section">Clients</div>
  <div id="contact" class="section">Contact</div>
</body>

</html>

【讨论】：

嗨，Rajesh，谢谢，但还没有工作。是否可以在我的代码中修改一些 jquery，以便我可以得到我真正想要的？
您好，我已经成功了，但是当我们点击 about 链接并转到页面的 about 部分然后再次单击 open sidenav 显示时，我希望 sidenav 隐藏意味着当我们访问关于部分 sidenav 隐藏以便内容仅可见时.
我不明白。单击其中的任何链接时，您希望隐藏侧导航。我对吗？这就是我在这里做的。
仍然对您的要求感到困惑。检查一次更新的答案。
Bootstrap 侧导航应在单击链接时自动隐藏，当在移动设备中查看时，我们只会在页面上看到类似 thegramin.biz 的内容，我们会转到 about 部分，单击链接后扩展菜单会自动关闭。