Bootstrap導航抽屜不工作

我試圖使用bootstrap導航抽屜（可在這裏：http://clineamb.github.io/bootstrap-drawer）我試圖在上傳器提供的example.html工作，但無法使其工作。我知道，我可能犯了錯誤某處，但不知道出了什麼問題（因爲這是新的）請幫助我。Bootstrap導航抽屜不工作

抽屜內容被隱藏，但是當我嘗試點擊< a>標記（菜單）時，它什麼都不做。

<script> 
 
($('.drawer').drawer());  
 
    </script>

<script src="https://clineamb.github.io/bootstrap-drawer/dist/css/drawer.js"></script> 
 
<script src="https://clineamb.github.io/bootstrap-drawer/dist/js/drawer.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
    <!--<script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script>--> 
 
    <link rel='stylesheet' href='webjars/bootstrap/3.3.5/css/bootstrap.css'> 
 
    <link href="plugins/Drawer/css/bootstrap-drawer.css" rel="stylesheet" type="text/css"/> 
 
    <link href="plugins/Drawer/css/bootstrap-drawer.min.css" rel="stylesheet" type="text/css"/> 
 
    <script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script> 
 
    <script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="webjars/bootstrap/3.3.5/js/transition.js"></script> 
 
    <script src="plugins/Drawer/js/drawer.js" type="text/javascript"></script> 
 
     
 
    <link href="plugins/Drawer/example/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
 
<script src="plugins/Drawer/example/highlight.pack.js" type="text/javascript"></script> 
 

 
</head> 
 

 
<body class="has-drawer"> <!-- add this class to your body for proper sizing --> 
 
    <div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample"> 
 
     <div class="drawer-controls"> 
 
      <a data-toggle="drawer" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a> 
 
     </div> 
 
     <div class="drawer-contents"> 
 
      <div class="drawer-heading"> 
 
       <h2 class="drawer-title">Menu</h2> 
 
      </div> 
 
      <div class="drawer-body"> 
 
       <p> 
 
        This is a properly padded container for content in the 
 
        drawer that isn't a navigation. 
 
       </p> 
 
       <a href="#">A Regular Link</a> 
 
      </div> 
 
      <ul class="drawer-nav"> 
 
       <li role="presentation" class="active"><a href="#">Home</a></li> 
 
       <li role="presentation"><a href="#">Profile</a></li> 
 
       <li role="presentation"><a href="#">Messages</a></li> 
 
      </ul> 
 
      <div class="drawer-footer"> 
 
       <small>&copy; Caroline Amaba</small> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <!-- content as per usual --> 
 
    </div> 
 
</body>

來源

2015-11-05 Balram

您的標記是好的，你只是簡單地忘記爲目標的.drawer-controls按鈕id，即href="#drawerExample"：

<a data-toggle="drawer" href="#drawerExample" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>

你的代碼工作這裏 - >http://jsfiddle.net/14e95rpr/

來源

2015-11-05 07:47:19 davidkonrad

Bootstrap導航抽屜不工作

回答

相關問題