禁用引导程序下拉列表

Question

我使用带有下拉列表的引导程序响应导航。当网站显示在一个小屏幕上时，我想禁用下拉菜单并启用下拉切换按钮后面的超链接。

我已经添加了禁用的类到切换按钮，但我怎么才能使其工作只@media（max-width：480px）？

在这里你可以找到一个test page

<div class="row nav_row mobile"> 
     <ul class="nav nav-pills dropdown nav_responsive"> 
      <li><a class="dropdown-toggle collapse-btn">Menu<span class="caret"></span></a></li> 
     </ul> 
     <div class="nav-collapse"> 
      <ul class="nav nav-pills"> 
       <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Vakanties <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Binnenland</a></li> 
         <li><a href="#">Buitenland</a></li> 
         <li><a href="#">Inleefreizen</a></li> 
         <li><a href="#">Gezondheidsreizen</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Vormingen <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Monitor</a></li> 
         <li><a href="#">Hoofdmonitor</a></li> 
         <li><a href="#">Instructeur</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Gezondheid</a></li> 
       <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Internationaal <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">EVS</a></li> 
         <li><a href="#">Groepsuitwisselingen</a></li> 
         <li><a href="#">Trainingscursussen</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Projecten</a></li> 
       <li class="clearfix"><a href="#">Actueel</a></li> 
      </ul> 
      <div style="clear:left"></div> 
     </div> 
    </div> 

Answer 1

我发现了一个可以接受的答案。随着一点JQuery的帮助

$(document).ready(function() { 
    function checkWidth() { 
     var windowSize = $(window).width(); 
     if (windowSize > 480) { 
      $('.disabled').removeClass('disabled').addClass('enabled'); 
     } else if (windowSize <= 479) { 
      $('.enabled').removeClass('enabled').addClass('disabled'); 
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
}); 

Answer 2

我修复了使用Bootstrap响应实用工具来显示和隐藏选定的divs类似的问题。所以基本上我创建了两个菜单 - 一个仅在XS屏幕上可见，另一个在所有其他屏幕尺寸下可见。

<div class="container"> 
    <div class="row clearfix"> 
     <div class="col-md-12 column"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Brand</a> 
       </div> 
       <div class="hidden-xs"> 
        <ul class="nav navbar-nav navbar-right"> 
         <!-- NAVBAR ITEMS FOR LARGER THAN XS SCREENS --> 
        </ul> 
       </div> 
       <div class="visible-xs hidden-sm hidden-md hidden-lg"> 
        <div class="collapse navbar-collapse" id="mycollapse"> 
         <ul class="nav navbar-nav navbar-right"> 
          <!-- NAVBAR ITEMS FOR XS SCREEN --> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     </div> 
    </div> 
</div> 

Answer 3

.dropdown-menu { 
    border: 0 none; 
    display: block; 
    float: none; 
    font-size: 14px; 
    padding: 5px 19px; 
    position: static; 
    text-align: none; 
}