2017-09-27 202 views
0

我用引導側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>

一旦訪問該頁面下一次菜單不顯示的部分?我該怎麼辦??任何解決方案我只想點擊鏈接而不是整個導航欄來顯示欄目。 謝謝!

+0

您好,歡迎StackOverflow上。請參閱https://stackoverflow.com/help/how-to-ask,瞭解如何根據指南提出正確的問題並改進您的問題。 –

+0

嗨有可能隱藏一個div點擊一個錨鏈接在同一個div和訪問鏈接後,再次div可以顯示? –

回答

0

嘗試下面的內容。

$('#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>

+0

嗨Rajesh謝謝,但還沒有工作。是否有可能修改我的代碼中的一些jquery,以便我可以得到我真正想要的? –

+0

嗨我已經做到了,但我希望sidenav隱藏,當我們點擊關於鏈接並轉到關於頁面的部分,然後再次單擊打開sidenav顯示意味着當我們訪問關於部分sidenav隱藏,所以只有內容是可見的。 –

+0

我不明白。點擊任何鏈接時,你想隱藏你的側面導航。我對嗎?這就是我在這裏所做的。 –