我如何从引导程序的文档中单击以关闭此自定义画布导航? [英] How do I outside-click-to-close this custom offcanvas nav from bootstrap's docs?

问题描述

我正在使用 Bootstrap 4 文档中的 offcanvas 实验代码，但是当您在菜单外单击时它不会关闭，这是我非常希望它做的事情.

我已经在网络上尝试了几个 jquery 片段，但它们使用引导程序的 .collapse 并且在我编辑它们以包含自定义 .offcanvas-collapse 类时不起作用.

<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas" data-target="#offcanvasNav" aria-controls="navbarResponsive" aria-expanded="false"aria-label="切换导航"><i data-feather="menu"></i><a class="navbar-brand" href="#">花言巧语</a><button class="navbar-toggler p-0 border-0" type="button" data-toggle="searchBar"><i data-feather="搜索"></i><form class="form-inline my-2 my-lg-0 d-none"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></表单><div class="navbar-collapse offcanvas-collapse" id="offcanvasNav"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">仪表板<span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">通知</a><li class="nav-item"><a class="nav-link" href="#">个人资料</a><li class="nav-item"><a class="nav-link" href="#">切换帐号</a><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">设置</a><div class="dropdown-menu" aria-labelledby="dropdown01"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>

<form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></表单>

</nav>.offcanvas 折叠 {位置:固定；顶部:56px；/* 导航栏高度 */底部:0；正确:100%；宽度:240px；填充右:1rem;填充左:1rem;溢出-y:自动；可见性:隐藏；背景颜色:紫色；过渡:可见性 .2s 缓出，-webkit-transform .2s 缓入；过渡:转换 0.2 秒的缓入淡出，可见性 0.2 秒的缓入淡出；过渡:转换 .2s 缓入，可见性 .2s 缓入，-webkit-transform .2s 缓入；}.offcanvas-collapse.open {可见性:可见；-webkit-transform: translateX(100%);变换:translateX(100%);}$(函数(){'使用严格'$('[data-toggle="offcanvas"]').on('click', function () {$('.offcanvas-collapse').toggleClass('open')})})$(document).on('click',function(){$('.offcanvas-collapse').offcanvas-collapse('隐藏');})

我希望这能让画布导航可以通过菜单按钮切换(打开和关闭)，并在菜单外单击时关闭导航，但在导航外单击什么也不做.

解决方案

$(document).on('click',function(){$('.offcanvas-collapse').toggleClass('open');})

单独，将在文档中具有 offcanvas-collapse 类的所有元素上切换 open 类.如果元素具有类，则将其删除，否则将添加.

如果您将以上内容与其他代码段结合起来:

$(function () {'使用严格'$('[data-toggle="offcanvas"]').on('click', function () {$('.offcanvas-collapse').toggleClass('open')})})

...，每次点击[data-toggle="offcanvas"]，两个片段都在运行(因为你点击了[data-toggle="offcanvas"] 但你也点击 document (因为 click 事件一直冒泡到 document，除非被阻止).因此类offcanvas-collapse 被切换了两次，所以看起来它不起作用.

这显然不是你想要的.

您可能想要:

• 在点击 [data-toggle="offcanvas"] 时，在 .offcanvas-collapse 元素上切换类 open 没有允许 click 事件传播到 document.
当在文档中的任意位置执行单击操作时，
• 从 .offcanvas-collapse 元素中移除(不是 toggle)类 open.如果您使用 toggle，当关闭画布时，document 中的 click 将打开它，这可能不是您想要的.

话虽如此，以下是实际操作方法:

$(function () {'使用严格'$(文件).on('click', '[data-toggle="offcanvas"]', function(e) {$('.offcanvas-collapse').toggleClass('open');//切换`.open`e.stopPropagation();//并停止传播}).on('点击', function() {$('.offcanvas-collapse').removeClass('open');//移除 `.open`});})

根据评论请求，只在导航栏外部点击时关闭画布，用这个替换第二个 .on() :

.on('click', function(e) {if (!$(e.target).closest('nav.fixed-top').is('nav')) {$('.offcanvas-collapse').removeClass('open');//移除 `.open`}});

检查点击的目标是否在 <nav> 和 fixed-top 类中.

I'm using the offcanvas experiment code from Bootstrap 4 documentation, but it's not designed to close when you click outside the menu, which is something I would really like it to do.

I've tried several of the jquery snippets around the web, but they utilize bootstrap's .collapse and don't work when I edit them to contain the custom .offcanvas-collapse class.

<nav class="navbar fixed-top navbar-dark bg-dark">
      <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas" data-target="#offcanvasNav" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i data-feather="menu"></i>
          </button>
            <a class="navbar-brand" href="#">Sleight of Word</a>
            <button class="navbar-toggler p-0 border-0" type="button" data-toggle="searchBar">
              <i data-feather="search"></i>
            </button>
            <form class="form-inline my-2 my-lg-0 d-none">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>

          <div class="navbar-collapse offcanvas-collapse" id="offcanvasNav">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Notifications</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Profile</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Switch account</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>

.offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    right: 100%;
    width: 240px;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: purple;
    transition: visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out, visibility .2s ease-in-out;
    transition: transform .2s ease-in-out, visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
  }

  .offcanvas-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }


$(function () {
  'use strict'

  $('[data-toggle="offcanvas"]').on('click', function () {
    $('.offcanvas-collapse').toggleClass('open')
  })
})

$(document).on('click',function(){
    $('.offcanvas-collapse').offcanvas-collapse('hide');
})

I was hoping that this would make the offcanvas nav toggleable (open and close) with the menu button and make the nav close when click outside the menu, but clicking outside the nav does nothing.

解决方案

$(document).on('click',function(){
  $('.offcanvas-collapse').toggleClass('open');
})

alone, will toggle the class open on all elements having the class offcanvas-collapse in your document. If the element has the class, it will be removed, otherwise it will be added.

If you combine the above with the other snippet:

$(function () {
  'use strict'

  $('[data-toggle="offcanvas"]').on('click', function () {
    $('.offcanvas-collapse').toggleClass('open')
  })
})

..., every time you click on [data-toggle="offcanvas"], both snippets are running (because you click on [data-toggle="offcanvas"] but you also click on document (because click event bubbles all the way up to document, unless prevented). Therefore the class offcanvas-collapse gets toggled twice, so it will look like it's not working.

That's clearly not what you're after.

You probably want to:

• toggle the class open on .offcanvas-collapse elements when [data-toggle="offcanvas"] is clicked without allowing that click event to propagate to document.
• remove (not toggle) the class open from .offcanvas-collapse elements when a click is performed anywhere in the document. If you use toggle, a click in document when offcanvas is closed will open it, which is probably not what you want.

That being said, here's the practical way to do it:

$(function () {
  'use strict'

  $(document)
    .on('click', '[data-toggle="offcanvas"]', function(e) {
      $('.offcanvas-collapse').toggleClass('open'); // toggle `.open`
      e.stopPropagation(); // and stop propagation
    })
    .on('click', function() {
      $('.offcanvas-collapse').removeClass('open'); // remove `.open`
    });
})

Edit: as per the comment request, to only close the off-canvas when clicking outside of the navbar, replace the second .on() with this one:

.on('click', function(e) {
   if (!$(e.target).closest('nav.fixed-top').is('nav')) {
     $('.offcanvas-collapse').removeClass('open'); // remove `.open`
   }
 });

It check is the target clicked is inside a <nav> with class fixed-top.

这篇关于我如何从引导程序的文档中单击以关闭此自定义画布导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！