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

尝试一下：

$(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 2

尝试这个工作小提琴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 3

将此代码放在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 4

我认为最好的方法是在行末添加

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

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>

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

5 个答案: