Question

我有一个扩展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>

我如何定义类

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

每次点击.sidenav-body / $ sideNavBody时都会返回此错误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

这有用吗？

reference

内部函数有自己的$(this.$sideNavBody).click(function(e){ $(this.sideNavBodyCloseEvent()); console.log(e); }.bind(this));对象，它没有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();
    }

如何将定义的函数传递给jQuery点击事件？

2 个答案: