jQuery Offcanvas 在响应式网页中不起作用

Question

我使用这个 link 编写了自定义 jQuery Offcanvas用于我的响应式网页。
这是我的代码:
jquery代码:

$(document).ready(function () {
                $('.example-0').offcanvas({
                    mainCanvas:'#mainDiv',
                    css:{
                        width: '80%',
                    },
                });
                $('#menu').click(function() {
                    $('.example-0').offcanvas('toggle');
                });
            });  

HTML代码:

        <div id = "mainDiv" class = "container" style="padding:0px;width:100%;height:100%">

                    <div id = "header">
                    <div class="example-0">
                        <nav>
                            <ul class="vertical-menu">
                                <li><a href="">Home</a></li>
                                <li><a href="">Blog</a></li>
                                <li><a href="">About</a></li>
                                <li><a href="">Whatever</a></li>
                                <li><a href="">You</a></li>
                                <li><a href="">Want</a></li>
                                <li><a href="">It has it's own scrollbar</a></li>
                                <li><a href="https://youtu.be/yetPcm9emWs" target="_blank">See a funny video</a></li>
                            </ul>
                        </nav>
                    </div>
                        <div id = "icons">

                            <div class="example-page-0">
                                <span id="menu" class = "menu"></span>
                            </div>
                            <span id = "back"></span>

                        </div>
    </div>
</div>

我将 mainDiv 作为 mainCanvas 并将 #menu 作为 toggler 和 example-0 作为 div 必须在启动 toggler 时加载。 但它不起作用。我的 JS 和 HTML 代码混淆了。

Answer 1

问题在于主 Canvas (使用 mainCanvas: 选择)不能是 #mainDiv 的子级。下面是一个帮助您组织 Canvas 元素的示例:

$(document).ready(function() {
   $('#yourMenu').offcanvas({
      mainCanvas: '#outerContainer',
      css: {
         width: '80%',
      },
   });
   $('#menuButton').click(function() {
      $('#yourMenu').offcanvas('toggle');
   });
});

#outerContainer {background-color:teal;}#yourMainCanvas {background-color:pink; }#yourMenu {background-color:lavender;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="https://cheich.github.io/jquery.offcanvas/build/css/jquery.offcanvas.min.css" /><script type="text/javascript" src="https://cheich.github.io/jquery.offcanvas/build/js/jquery.offcanvas.min.js"></script>
<div id="outerContainer">
    <div id="yourMenu">
      This is your menu area in yourMenu
      <nav>
        <ul class="vertical-menu">
          <li><a href="">Home</a></li>
          <li><a href="">Blog</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Whatever</a></li>
          <li><a href="">You</a></li>
          <li><a href="">Want</a></li>
        </ul>
      </nav>
    </div>
    <div id="yourMainCanvas">
      This is where your content goes inside yourMainCanvas
      <p><button id="menuButton">Toggle menu</button></p>
    </div>
    This area is unused - part of outerContainer
</div>