javascript - IE nextSibling 和 nextElementSibling 不工作

Question

这只是一个简单的下拉菜单...在 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 中使用它吗？好吧! (仅限原始 JS - 无 jQuery)

Answer 1

当你使用 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>