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中使这项工作？ tyvm！（仅限原始JS - 没有jQuery）

Answer 1

IE不支持文本节点上的nextElementSibling，仅支持元素。

将其填充或仅使用nextSibling。

Answer 2

当您自动使用nextElementSibling文字节点时，您无需手动检查文本同级，因此您只需使用nextElementSibling代替nextSibling.nextElementSibling

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

根据此MDN页面，IE不支持

nextElementSibling：https://developer.mozilla.org/en/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling

同一页面有一个Polyfill，如果您不想避免使用nextElementSibling，这可能是一个解决方案。

if(!("nextElementSibling" in document.documentElement)){
    Object.defineProperty(Element.prototype, "nextElementSibling", {
        get: function(){
            var e = this.nextSibling;
            while(e && 1 !== e.nodeType)
                e = e.nextSibling;
            return e;
        }
    });
}

IE nextSibling和nextElementSibling无法正常工作

3 个答案: