沒有導航標籤Bootstrap3

響應導航欄我知道這很奇怪，但我已經採取了菜單欄的代碼whitout nav標籤..沒有導航標籤Bootstrap3

我想什麼：一個漢堡包圖標（這是確定）。當用戶點擊它時，菜單慢慢下滑（我使用jQuery的slideToggle函數）。爲此，菜單必須隱藏，但如果我將它隱藏在小屏幕（手機）中，它也隱藏在大屏幕上！

我有什麼：此代碼：

<div class="col-xs-1 hidden-sm hidden-md hidden-lg"> 
    <span id="hamburger"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></span> 
</div> 

<div class="col-xs-12 col-sm-8 menu-nav hidden-xs"> 
    <div class="row text-center"> 

     <a href="{{ path('jt_concours_index') }}"> 
      <div class="col-md-2 col-sm-2 botborder concours"><span class="menu_valign">le concours</span> 
      </div> 
     </a> 
     <a href="#"> 
      <div class="col-md-2 col-sm-2 botborder nos-produits"><span class="menu_valign">nos produits</span> 
      </div> 
     </a> 
    </div> 
</div>

JS：

$('#hamburger').on('click', function(){ 
      if ($('.menu-nav').hasClass('hidden-xs')){ 
       $('.menu-nav').removeClass('hidden-xs'); 
      } else { 
       $('.menu-nav').addClass('hidden-xs'); 
      } 

      $('.menu-nav').slideToggle('slow'); 
     });

但它不工作..有一個想法？

編輯

我終於用從引導collapse類，像這樣：

<button class="toggle" data-toggle="collapse" data-target=".menu-nav"> 
    <span id="hamburger"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></span> 
</button> 

<div class="col-xs-12 col-sm-8 menu-nav collapse"> 
    <div class="row text-center"> 

     <a href="{{ path('jt_concours_index') }}"> 
      <div class="col-md-2 col-sm-2 botborder concours"><span class="menu_valign">le concours</span> 
      </div> 
     </a> 
     <a href="#"> 
      <div class="col-md-2 col-sm-2 botborder nos-produits"><span class="menu_valign">nos produits</span> 
      </div> 
     </a>

而現在它的正常工作。謝謝:)

來源

2017-04-06 Emilien

你是否嘗試將其從display：none更改爲例如display：block而不是使用hidden-nn類？你也可以爲它創建自己的隱藏類。

來源

2017-04-06 12:35:05

沒有導航標籤Bootstrap3

回答

相關問題