时间戳

首页 > 解决方案 > 元素父级的未定义 nextElementSibling

jquery - 元素父级的未定义 nextElementSibling

问题描述

我有一个折叠菜单，我想用一个单独的标签来控制。我认为我的问题是折叠/展开的菜单与触发更改的按钮是分开的。

结构是这样的：

<div>
  <p>blah blah</p>
  <a class="collapsible">click here to collapse/expand</a>
</div>

<div class="panel-heading"></div>

这里的关键是折叠/展开的菜单与触发更改的按钮是分开的。

我的 JQuery 看起来像：

<script type="text/javascript">
  $( document ).ready(function() {
    var coll = document.getElementsByClassName("collapsible");

    for (var i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = $(this).parent().nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } 
        else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
  });
</script>

但是，当我单击标签时，我收到错误“无法读取未定义的属性 'maxHeight'”。

为什么元素未定义而不是找到同级面板标题？是否有不同的方式来引用对象？

感谢您的任何帮助或见解

标签： jquery

解决方案

var content = $(this).parent().nextElementSibling;

nextElementSibling是原始 DOM 元素属性（https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling）。jQuery 不会直接通过其接口公开大多数 Element 属性。相反，您必须以几种方式之一来解决这个问题。

你可以打破 jQuery 中的对象

var content = $(this).parent()[0].nextElementSibling;
//or
var content = $(this).parent().get(0).nextElementSibling;

这两个都将返回 DOM 元素，您可以直接访问该属性。

您可以使用该prop()方法

var content = $(this).parent().prop('nextElementSibling');

prop()将返回您为其命名的 DOM Element 属性。

您可以使用该next()方法

var content = $(this).parent().next()[0];

next()返回元素的下一个兄弟元素，从文档来看，它似乎是nextElementSibling引用的内容。

推荐阅读