Question

我试图使用bootstrap导航抽屉（可在此处获取：http://clineamb.github.io/bootstrap-drawer）我试图在上传者提供的example.html上工作，但是无法使其工作。我知道，我可能在某个地方犯了错误，但不知道出了什么问题（对此我不熟悉）。请帮助我进行。

抽屉内容被隐藏但是当我尝试点击＆lt;一个＆GT;标签（菜单），它什么都不做。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您的加价很好，您只是忘记定位id按钮中的.drawer-controls，即href="#drawerExample"：

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

您的代码在这里工作 - ＆gt;的 http://jsfiddle.net/14e95rpr/

Bootstrap导航抽屉无法正常工作

1 个答案: