如何將定義的函數傳遞給jQuery click事件？

Question

我有一個在btn click上擴展的抽屜菜單，我要實現的目的是當用戶單擊覆蓋整個身體的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>

我如何定義班級

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

我在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 is not a function每次單擊.sidenav-body / $ sideNavBody時this.sideNavBodyCloseEvent Uncaught TypeError: this.sideNavBodyCloseEvent is not a function

如何通過元素單擊上的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; }; }

在提出任何建議之前，我從未見過或遇到過此問題？

Answer 1

這樣行嗎？

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

內部函數具有其自己的this對象， this對象沒有sideNavBodyCloseEvent方法。 要在內部函數中使用外部函數的this對象，請使用bind 。

通常，您具有一個綁定必要的事件處理程序的初始化函數：

init () {
  this.$sideNavBtn.click(this.sideNavBodyOpenEvent.bind(this));
  this.$sideNavBody.click(this.sideNavBodyCloseEvent.bind(this));
}

Answer 2

如何以不同的方式執行此操作。 我想我在元素的某個地方犯了一個錯誤，但是將元素作為參數傳遞是主要的變化。

$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();
    }