2015-10-18 146 views
0

我一直在嘗試幾個小時才能使其工作。看了幾個關於starkoverflow的例子。但我解決不了。有人建議應該加上:Bootstrap導航欄不會在手機上崩潰

$(document).on('click','.navbar-collapse.in',function(e) { 
    if($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') { 
     $(this).collapse('hide'); 
    } 
}); 

但是我不知道在哪裏添加它。我試圖將它添加到bootstrap.js,但它不起作用。我是一個新手,試圖通過學習拼湊一個網站來建立第一個網站。這是我正在編輯的網站:fotroviciliji.si。點擊鏈接後,在較小設備上顯示的引導菜單將不會關閉。我已經看過例子,即使在那些應該工作的人,但不要。點擊菜單中的鏈接後,stil不會關閉。一個用戶發佈了它的小提琴,據說可以工作,但是當我嘗試使用Chrome時,它並沒有。選擇某些東西后,菜單不會摺疊。我究竟做錯了什麼?這fiddle工程,但我太愚蠢將其應用到我的網站。

請幫忙!

回答

0

我一直在嘗試幾個小時。這是我現在的作品,我補充說:

 <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li> 
        <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">PONUDBA<i class="fa fa-caret-down"></i></a> 
      <ul class="dropdown-menu"> 
      <li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li> 
      <li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li> 
    <li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li> 
    <li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li> 
      </ul> 
     </li> 
     <li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li> 
     <li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li> 
     <li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li> 
     <!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->    
     </ul> 
    </div><!--/.nav-collapse --> 

到每個菜單項。選擇某些東西后,菜單現在會自動重新貼上。

1

它可能沒有工作,因爲您將它包含在bootstrap.js中,但不包含在bootstrap.min.js中,它似乎接管了像手機這樣的小屏幕尺寸。將你的代碼包含在bootstrap.js和bootstrap.min.js文件的底部,點擊/按下指向內部錨的鏈接(無論你是在手機上執行操作(bootstrap.min.js)還是平板電腦/臺式機上減少窗口大小(bootstrap.js)。

+function ($) { 
    'use strict'; 
    $(document).on('click', 'navbar-collapse.in', function (e) { 
     if ($(e.target).is('a')) { 
      $(this).collapse('toggle'); 
     } 
    }); 
}(jQuery); 

上面的代碼爲我工作。我從另一個論壇檢索線2-7和我不記得在哪裏。前提下,儘可能據我所知,通過搜索網絡,是內部鏈接不會刷新頁面(例如,在一個頁面的網站),導航欄只會在到達新頁面時崩潰。上面的JavaScript代碼是爲創建解決問題。