gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:44:30 27 4
gpt4 key购买 nike

我使用这个 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 作为 togglerexample-0 作为 div 必须在启动 toggler 时加载。但它不起作用。我的 JSHTML 代码混淆了。

最佳答案

问题在于主 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>

关于jQuery Offcanvas 在响应式网页中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30775874/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com