Javascript 如何将定义的函数传递到jQuery单击事件？

我有一个抽屉菜单，在btn点击时展开，我试图实现的是当用户点击覆盖整个身体的sidenav body类时关闭菜单

下面是基本的html和js

<div class="offcanvas-body sidenav-body">
    <main id="main-content" role="main">
        <div class="container-fluid short-section-row">
           <div class="row">
               <div class="side-nav-btn navbar-btn js-side-nav-btn" aria-expanded="false" aria-label="Open Side Navigation" aria-controls="SecondaryMenu">Explore This Section <span class="svg-sprite -hamburger"><svg role="img" aria-label="[object Object]"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hamburger"></use></svg></span></div>
               <nav class="side-nav col-sm-2" role="Secondary navigation" aria-label="Side Navigation" aria-hidden="true" id="SecondaryMenu">
                   <div class="side-nav__control-bar">
                       <button class="navbar-btn js-side-nav-btn btn btn-primary pull-right" aria-expanded="false" aria-label="Close Side Navigation" aria-controls="SecondaryMenu" tabindex="-1"><span class="svg-sprite -close"><svg role="img" aria-label="close secondary nav"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg></span> Menu</button>
                   </div>
                   // some ul and li items
               </nav>
           </div>
        </div>
    </main>
</div>

我有一个btn点击切换功能

sideNavBodyToggleEvent(){
    // if the nav is open, run close event
    if(this.$body.hasClass('side-is-open')) {
        this.sideNavBodyCloseEvent();
    } else {
        this.sideNavBodyOpenEvent();
      }
    }

这些条件函数的定义是这样的

sideNavBodyCloseEvent () {
     this.$body.removeClass('side-is-open');
     // always clear the 'opened state' of any open menus
     this.$sideNavSection.removeClass('side-is-open');
     $(this.$controls).attr('tabindex', '-1');
     $(this.$sideNav).attr('aria-hidden', 'true');
     $(this.$sideNavBtn).attr('aria-expanded', 'false');
     $(this.$sideNavSectionToggle).removeClass('side-is-open');
     // unbind the pushed body click event
     this.$sideNavBody.off();
    }

sideNavBodyOpenEvent() {
      this.$body.addClass('side-is-open');
      $(this.$sideNav).attr('aria-hidden', 'false');
      $(this.$controls).removeAttr('tabindex');
      $(this.$sideNavBtn).attr('aria-expanded', 'true');
      // bind an event on the div containing the pushed body
      // original code left by prev dev was this.$sideNavBody.offClick.bind(this) and doesnt work as I think its trying to run both functions at once (the menu doesnt even open);
      //below I am just trying to test if the click event even makes it to this.$.sideNavBody which is the .sidenav-body class and the section I want users to be able to click to close
      $(this.$sideNavBody).click(function(e){
          console.log(e);
      });
    }

打开功能工作，抽屉菜单滑出，但我尝试关闭它如下

$(this.$sideNavBody).click(function(e){
          $(this.sideNavBodyCloseEvent());
          console.log(e);
});

返回此错误Uncaught TypeError:this.sideNavBodyCloseEvent不是每次单击.sidenav body/$sideNavBody时的函数

如何将sideNavBodyCloseEvent函数传递到该元素上

当添加代码位以在单击.sidenav主体时关闭菜单时，当遇到来自jquery的代码时，菜单将关闭

if ( !( eventHandle = elemData.handle ) ) { eventHandle = elemData.handle = function( e ) { // Discard the second event of a jQuery.event.trigger() and // when an event is called after a page has unloaded return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ? jQuery.event.dispatch.apply( elem, arguments ) : undefined; }; }

我以前从未见过或遇到过这个问题，有什么建议吗

这有用吗

$this.$sideNavBody.clickfunction{ $this.sideNavBodyCloseEvent； console.loge； }.这一点； 内部函数有自己的this对象，它没有sideNavBodyCloseEvent方法。要在内部函数中使用外部函数的this对象，请使用

通常，您有一个绑定必要事件处理程序的初始化函数：

初始化{ this.$sideNavBtn.clickthis.sideNavBodyOpenEvent.bindthis； 此。$sideNavBody.clickthis.sideNavBodyCloseEvent.bindthis； }

---

换一种方式怎么样。 我想我在元素的某个地方犯了一个错误，但是将这个元素作为参数传递是主要的改变

$body = $(el);
$sideNavBody = $('.sidenav-body');
$sideNav = $('.side-nav');
$controls = $('.side-nav button');
$sideNavBtn = $('.js-side-nav-btn');

$sideNavBody.click(function(e){
          sideNavBodyCloseEvent($(this))
          console.log(e);
});

sideNavBodyCloseEvent (element) {
     element.$body.removeClass('side-is-open');
     // always clear the 'opened state' of any open menus
     element.$sideNavSection.removeClass('side-is-open');
     $controls.attr('tabindex', '-1');
     $sideNav.attr('aria-hidden', 'true');
     $sideNavBtn.attr('aria-expanded', 'false');
     $sideNavSectionToggle.removeClass('side-is-open');
     // unbind the pushed body click event
     $sideNavBody.off();
    }

---

为什么你不能只运行这个函数，如果不使用jquery？嘿@PeterMader，我觉得这很好，但它又回到了原始代码的问题，即菜单甚至不会打开它，就像sideNavBodyOpenEvent需要完成但不打开一样？编辑：使用断点单步通过调试器，菜单会展开，但当它碰到那一段代码时，它会自动关闭调用此.sideNavBodyCloseEvent太早？可能吗？我在控制台的this.$body.addClass'side-is-open'行上设置了一个断点&在jquery:if！中的这段代码导致菜单关闭！eventHandle=elemData.handle{eventHandle=elemData.handle=function e{//放弃jQuery.event.trigger的第二个事件，并//在页面卸载返回类型jQuery之后调用事件时！==undefined&&jQuery.event.trigger！==e.type？jQuery.event.dispatch.apply elem，参数：undefined；}sidenav body作为nav元素的父元素是否与此有关？我可以使用我的源代码和你的源代码，但是将类设置为$sideNav/.sideNav，它会工作，因为它的目标是自己，还是导致它在dom中处于同一级别？

$body = $(el);
$sideNavBody = $('.sidenav-body');
$sideNav = $('.side-nav');
$controls = $('.side-nav button');
$sideNavBtn = $('.js-side-nav-btn');

$sideNavBody.click(function(e){
          sideNavBodyCloseEvent($(this))
          console.log(e);
});

sideNavBodyCloseEvent (element) {
     element.$body.removeClass('side-is-open');
     // always clear the 'opened state' of any open menus
     element.$sideNavSection.removeClass('side-is-open');
     $controls.attr('tabindex', '-1');
     $sideNav.attr('aria-hidden', 'true');
     $sideNavBtn.attr('aria-expanded', 'false');
     $sideNavSectionToggle.removeClass('side-is-open');
     // unbind the pushed body click event
     $sideNavBody.off();
    }