侧边栏导航 - 单击侧边导航外部关闭侧边栏

Question

我正在使用此侧边栏 (https://bootsnipp.com/snippets/featured/fancy-sidebar-navigation)，当用户在导航栏外部单击时，我如何才能关闭该栏而不是通过 x 关闭。

这是JS

$(document).ready(function () {
        var trigger = $('.hamburger');
        var overlay = $('.overlay');
        var wrapperEl = $('#wrapper');
        var isClosed = false;

        function hamburger_cross() {
            if (isClosed === true) {
                overlay.hide();
                trigger.removeClass('is-open').addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed').addClass('is-open');
                isClosed = true;
            }
        }

        trigger.click(function () {
            hamburger_cross();
        });

        $('[data-toggle="offcanvas"]').click(function () {
            wrapperEl.toggleClass('toggled');
        });
    });

可以在这里找到完整的工作片段： https://bootsnipp.com/snippets/featured/fancy-sidebar-navigation

Answer 1

将此代码放入 hamburger_cross() 功能块

// on document click...
$(document).on("click",function() {
    // If mobile nav is open...
    if (isClosed === true) {
        // Close
        overlay.hide();
        trigger.removeClass('is-open').addClass('is-closed');
        isClosed = false;
    }
});

我还没有对此进行测试，但据我所知，它应该可以正常工作。

Answer 2

试试这个：

$(document).ready(function () {
  var trigger = $('.hamburger'),
      overlay = $('.overlay'),
     isClosed = false;

    trigger.add(overlay).click(function () {
      hamburger_cross(); 
      $('#wrapper').toggleClass('toggled');
    });

    function hamburger_cross() {

      if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }

  /*$('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
  });  */
});

Answer 3

我认为最好的方法是在最后添加这一行

$('.overlay').click(function () {
    $('#wrapper').toggleClass('toggled');
});

Answer 4

试试这个工作 Fiddle http://jsfiddle.net/ex8ddv5q/811/

$(document).ready(function () {
  var trigger = $('.hamburger'),
      overlay = $('.overlay'),
     isClosed = false;

    trigger.add(overlay).click(function () {
      hamburger_cross(); 
      $('#wrapper').toggleClass('toggled');
    });

    function hamburger_cross() {

      if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }
});

Answer 5

我的 Joomla 3.9.18 网站上有一个简单的解决方案：

用于打开和关闭导航以及关闭叠加层的 javascript 是这样的：

function openNav() {document.getElementById("overlay").style.visibility = "visible";
  document.getElementById("mySidenav").style.width = "310px"; 
}
function closeNav() {
  document.getElementById("overlay").style.visibility = "hidden";
  document.getElementById("mySidenav").style.width = "0";
}

在 index.php 文件中，覆盖 div 开始标记是这样的：

<div id="overlay" onclick="closeNav()">

因此它使用与标准 'X' 闭包相同的 javascript。

打开sidenav的html代码：

<div id="burger" class="burger" style="cursor:pointer" onclick="openNav()">&nbsp;</div>

并用常规的 'X':

关闭它

        <jdoc:include type="modules" name="responsivebar" style="none" />
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
</div>

侧边栏导航 - 单击侧边导航外部关闭侧边栏

Sidebar nav - click outside of side nav that closes the sidebar

javascript

css

jquery

sidebar

bootstrap-4