javascript - IE nextSibling和nextElementSibling不起作用

这只是一个简单的下拉菜单...在Chrome，FF和Safari中都能正常运行。
但在IE中：无法获取未定义或空引用的属性“样式”

document.getElementById('icon').addEventListener('click', function() {
  var a = document.getElementsByClassName('menuBookAction');
  for(var i=0; i < a.length; i++) {
    if(a != this) {
      a[i].style.display='none'
    }
  }
  if(this.nextSibling.nextElementSibling.style.display=='none') {
    this.nextSibling.nextElementSibling.style.display = 'block';
  }
});

@import 'https://cdn.materialdesignicons.com/1.1.34/css/materialdesignicons.min.css';
#icon { cursor: pointer; }

<div id="icon">
  <i class="mdi mdi-settings"></i>
  <i class="mdi mdi-arrow-drop-down"></i>
</div>
<div class="menuBookAction">
  <div (click)="cancelBooking(b.id);"><i class="mdi mdi-cancel"></i> Cancel Request</div>
</div>

任何线索如何使这项工作在IE中也是如此？ tyvm！ （仅限原始JS-没有jQuery）

最佳答案

当您使用自动跳过的nextElementSibling文本节点时，不需要手动检查文本兄弟，因此只需要使用nextElementSibling代替nextSibling.nextElementSibling

document.getElementById('icon').addEventListener('click', function() {
  var a = document.getElementsByClassName('menuBookAction');
  for(var i=0; i < a.length; i++) {
    if(a != this) {
      a[i].style.display='none'
    }
  }
  if(this.nextElementSibling.style.display=='none') {
    this.nextElementSibling.style.display = 'block';
  }
});

@import 'https://cdn.materialdesignicons.com/1.1.34/css/materialdesignicons.min.css';
#icon { cursor: pointer; }

<div id="icon">
  <i class="mdi mdi-settings"></i>
  <i class="mdi mdi-arrow-drop-down"></i>
</div>
<div class="menuBookAction">
  <div (click)="cancelBooking(b.id);"><i class="mdi mdi-cancel"></i> Cancel Request</div>
</div>