Bootstrap Mobile菜單保留打開

我有一個單頁模板，它使用「滾動到」導航類。一切正常，但手機菜單不會關閉，內容出現在菜單後面。Bootstrap Mobile菜單保留打開

如果我添加... data-toggle =「collapse」data-target =「。in」到鏈接...菜單將關閉，但我失去了'滾動到'功能。

有誰知道我可以如何結合'滾動到'CLASS和data-toggle =「collapse」data-target =「。in」？

沒有我試過的工作。

這是當前的NAB菜單...感謝您的期待！

<!-- Navigation Top start --> 
<nav class="navbar navbar-default navbar-fixed-top navbar-hidden navigation-top" id="navigation-top-1" 
    role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
        data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <!-- Logo start --> 
      <a class="navbar-brand scroll-to" href="#home"> 
       <span class="va-helper"></span> 
       <img src="img/nav-logo-mint1.png"/> 
      </a> 
      <!-- Logo end --> 
     </div> 

     <!-- Nav-Links start --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul style="padding-top:15px;" class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#home" class="scroll-to">Home</a></li> 
       <li><a href="#about-us" class="scroll-to">About Us</a></li> 
       <li><a href="#surfing-lessons" class="scroll-to">Surfing Lessons</a></li> 
       <li><a href="#rentals" class="scroll-to">Rentals</a></li> 
       <li><a href="#team" class="scroll-to">Team</a></li> 
       <li><a href="#contact" class="scroll-to">Contact</a></li> 
              <li><a href="#" class="btn btn-default navbar-btn btn-success show-appointment-modal"><i class="fa fa-calendar fa-fw"></i> Book A Lesson</a></li> 

      </ul> 
     </div> 
     <!-- Nav-Links end --> 
    </div> 
</nav> 
<!-- Navigation Top end -->

來源

2016-03-04 macrat1010

您的HTML菜單代碼完美。但我認爲，您必須使用JQuery來滾動部分。試試這個

例子：

$(document).ready(function(){ 
 
    
 
    // jQuery for page scrolling 
 
    $('a.scroll-to').bind('click', function(event) { 
 
     var $anchor = $(this); 
 
     $('html, body').animate({ 
 
      scrollTop: ($($anchor.attr('href')).offset().top - 50) 
 
     }, 1000); 
 
     event.preventDefault(); 
 
    }); 
 
    
 
});

.sample-nav{ 
 
    width:100%; 
 
    height:35px; position:fixed; top:0; left:0; background:#000; 
 
} 
 

 
.sample-nav a{color:#fff; 
 
-webkit-transition: all 0.35s; 
 
    -moz-transition: all 0.35s; 
 
    transition: all 0.35s;} 
 

 
.menu-bg{ 
 
background-color:red; 
 
    width:100%; height:600px; 
 
    margin-bottom:50px; 
 
} 
 
#menu2{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<html> 
 
    <body> 
 
    
 
    <div class="sample-nav"> 
 
     <a class="scroll-to" href="#menu1">Menu1</a> 
 
    <a class="scroll-to" href="#menu2">Menu2</a> 
 
     </div> 
 
    
 
    
 
    
 
    
 
    <div class="menu-bg" id="menu1"></div> 
 
    <div class="menu-bg" id="menu2"></div> 
 
    
 
    
 
    
 
    </body> 
 
    </html>

來源

2016-03-04 11:38:18 Manikandan

感謝您的答覆！單擊鏈接時，移動導航保持打開狀態。內容出現在導航後面。這隻發生在手機上，即iPhone ...在臺式電腦上沒有問題。謝謝 – macrat1010

Bootstrap Mobile菜單保留打開

回答

相關問題