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>© Caroline Amaba</small>
</div>
</div>
</div>
<div class="container">
<!-- content as per usual -->
</div>
</body>
答
您的标记是好的,你只是简单地忘记为目标的.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/