未定义元素父级的nextElementSibling

Question

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

结构如下：

<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'。”

为什么元素未定义而不是找到兄弟面板标题？有没有不同的方法来引用该对象？

感谢您提供任何帮助或见解

Answer 1

jQuery Objects无法识别大多数普通的JavaScript方法，并且Plain JavaScript Objects也不知道jQuery方法和属性是什么。因此，当使用诸如nextElementSibling之类的属性时，您需要将jQuery对象取消引用回到Plain JavaScript对象。解除引用jQuery对象有两种形式：

支架表示法中的Minty Zero-index

  $(jQObject)[0]

Zesty jQuery get()方法传递零索引

  $(jQObject).get(0)

演示

$('.collapsible').on('click', expandCollapse);

function expandCollapse(e) {
  var uncle = $(this)[0].parentElement.nextElementSibling;
  $(uncle).slideToggle('fast');
}

.panel-heading {display:none}

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

<div class="panel-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>



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

<div class="panel-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>



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

<div class="panel-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>









<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

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引用的内容。