Bootstrap Side Navigation nicht

zeigt

I verwendet Bootstrap Seite nav für meine eine Seitenvorlage wie unten:Bootstrap Side Navigation nicht

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

Sobald ein Abschnitt der Seite beim nächsten Mal Menü Besuch nicht zeigen ?? Was soll ich machen?? Irgendeine Lösungsmöglichkeit. Ich möchte Abschnitte nur beim Klicken auf Link nicht ganz nav div anzeigen. Danke !!

Quelle

2017-09-27 Mahesh Babu

Hallo und herzlich willkommen auf Stackoverflow. Unter https://stackoverflow.com/help/how-to-ask erfahren Sie, wie Sie eine richtige Frage stellen und Ihre eigenen gemäß den Richtlinien verbessern können. –

Hi ist es möglich, ein div beim Klicken auf einen Anker Link im gleichen div zu verstecken und nach dem Besuch des Links wieder div angezeigt werden kann? –

Versuchen Sie etwas wie unten.

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

Quelle

2017-09-27 09:50:16

Hi Rajesh danke, aber noch nicht funktioniert. Ist es möglich, einige JQuery in meinem Code zu ändern, so dass ich genau das bekommen kann, was ich will? –

Hallo Ich habe es gemacht, aber ich will Sidénav ausblenden, wenn wir über den Link klicken und zu etwa Abschnitt der Seite gehen, dann wieder auf Sidennav Anzeigen klicken bedeutet, wenn wir über Abschnitt sidennav blendet, so dass der Inhalt nur sichtbar ist. –

Ich verstehe es nicht. Sie möchten Ihr Seitennav verbergen, wenn Sie auf einen der Links klicken. Habe ich recht? das habe ich hier gemacht. –

Bootstrap Side Navigation nicht

Antwort

Verwandte Themen