我有一个扩展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; }; }
在提出任何建议之前,我从未见过或遇到此问题?
答案 0 :(得分:1)
这有用吗?
reference
内部函数有自己的$(this.$sideNavBody).click(function(e){
$(this.sideNavBodyCloseEvent());
console.log(e);
}.bind(this));
对象,它没有this
方法。要在内部函数中使用外部函数的sideNavBodyCloseEvent
对象,请使用bind
。
通常,您具有绑定必要事件处理程序的初始化函数:
this
答案 1 :(得分:0)
如何以不同的方式做到这一点。 我认为我在那里的元素中犯了一个错误,但是将这个元素作为参数传递是主要的变化。
$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();
}