标签: off-canvas-menu

更新: 为了消除一些困惑,我添加了一个小提琴,演示它应该如何工作,但它只是缺少 scrollspy:https://jsfiddle.net/kmdLg7t0/如何添加scrollspyto这个小提琴,以便菜单当我在特定部分时突出显示？

我创建了一个固定的左侧菜单,在浏览器宽度为<992px的平板电脑和移动设备上变成了一个非画布菜单 .当我在浏览器宽度> 992px上选择锚点链接时,它会关闭菜单并导航到锚点链接部分.

自定义JQuery代码: 这是我的自定义jQuery代码,当我点击锚链接时关闭Off-Canvas菜单:

// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
  $('body').removeClass('bs.offcanvas');
});

问题:

我决定添加一个bootstrap offscrollspy,它在浏览器宽度大于992px后按预期工作,但是当我将浏览器宽度调整到小于992px时,这会干扰自定义Jquery代码以关闭菜单并导航到锚链接.

这是小提琴:

Bootstrap ScrollSpy导致Off Canvas Menu和JQuery Code出现问题

我的GUESS:我猜这个问题的解决方案是使用jquery或javascript来阻止或删除data-target =".navmenu",当我的屏幕小于<992px时激活.或者,我们可以找到一种方法,只激活scrollspy后> 992px.我目前正试图解决这个问题,但我需要一个真正的jquery专家才能解决这个难题.

先决条件:

• Bootstrap.min.css
• Bootstrap.min.js
• jasny-bootstrap.css
• jasny-bootstrap.js

JS:

$(document).ready(function () {
  toggleOffcanvas($(window).width() <= 992);
});

// simulate modal opening
$('.nav-link').click(function() {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, …

我正在使用 offcanvas 组件（https://getbootstrap.com/docs/5.0/components/offcanvas/）。但是我想知道当我在 offcanvas 窗口外部单击时是否可以阻止它关闭。当我按 ESC 键时，我设法阻止它关闭，但是当我在画布外单击鼠标时，没有办法（就文档而言）阻止它关闭。有人有想法吗？

编辑：我通过监听 hide.bs.offcanvas 事件然后使用 e.preventDefault(); 设法让它工作一半；但是现在我无法使用其默认关闭按钮关闭关闭画布，因为它总是会取消隐藏事件。有任何想法吗？

我一直在搜索如何在单击某个菜单项后自动关闭画布菜单但似乎没有任何效果.

所以我按照指南介绍了如何在Foundation 6文档上制作非画布菜单并且它有效.这部分没关系.现在,当我点击一些链接菜单时,只要停留在那里,我希望它关闭.有谁知道如何解决这个问题.

我发现了应该做的技巧,但我的菜单在我应用这个JS后停止显示.其他人报告同样的问题.

$(document).foundation({
  offcanvas : {
    open_method: 'move', // Sets method in which offcanvas opens, can also be 'overlap'
    close_on_click : true
  }
});

这是文档,但由于我对JavaScript不太了解,我请求有人写出正确的代码.

我想使用 offcanvas 创建一个带有导航栏的网站。它工作得很好，但我想在鼠标离开功能上实现关闭导航栏。

您对此有何建议？

感谢你们

我在 offcanvas div 中有一个很长的链接列表。这些在表单中是因为我想使用它们来导航很长的背景页面。（实际上，它是一个目录）

画布愉快地弹出。导航链接有效；将背景页跳转到正确的位置。欢呼！

但是...当您选择并链接并导航背景页面到某个位置，然后关闭关闭画布时，背景页面将重置到页面顶部！呃……

当我关闭关闭画布时，如何防止背景页面重置位置？

感谢您提供的任何帮助。

div.head{
font-weight: bold;
margin-top: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group" aria-label="spec_tools">
    <a class="btn btn-outline-primary" data-bs-toggle="offcanvas" href="#offcanvasNav" role="button" aria-controls="offcanvasNav">Navigator</a>
</div>
    
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<strong>
<div>
<a href="#item0">Item0</a>
</div>
</strong>
<div class="ms-2">
<a href="#item1">Item 1</a>
</div>
<div class="ms-2">
<a href="#item2">Item 2</a>
</div>

<div class="ms-2">
<a href="#item3">Item 3</a>
</div> …