Question

我使用bootstrap side nav作为我的单页模板，如下所示：

 <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上显示部分。谢谢！

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

Bootstrap侧导航未显示

1 个答案: