javascript - 有没有办法在javascript es6中更改'this'的css属性？

我想知道在js es6中使用“ this”时是否有一种方法可以更改元素的样式。我下面有以下代码：

const mobileSubItems = document.querySelectorAll(".mobile-menu-overlay__item");
openSubMenu = (e) => {
  console.log(this);
}

for (var i = 0; i < mobileSubItems.length; i++) {
  mobileSubItems[i].addEventListener('click', openSubMenu);
}

<div class="mobile-menu-overlay__item-content" style="maxHeight:0;">Test 1</div>
<div class="mobile-menu-overlay__item-content" style="maxHeight:0;">Test 2</div>
<div class="mobile-menu-overlay__item-content" style="maxHeight:0;">Test 3</div>

我希望openSubmenu代码类似于以下内容：

openSubMenu = (e) => {
  this.style.maxHeight = "none";
}

最佳答案

是的，您可以使用提供的逻辑。但是由于箭头功能，您将丢失此上下文。而是使用event.target属性。

var openSubMenu = (e)=> {
  e.target.style.maxHeight = '240px';
}

要么

如果要使其指向单击的元素，请使用function关键字定义openSubMenu函数。

var openSubMenu = function(e) {
  this.style.maxHeight = '240px';
}

Working fiddle