javascript - 未捕获的类型错误 : Cannot read property 'style' of null at HTMLButtonElement. <匿名>

Question

以下用于可折叠文本的代码会抛出以下错误:Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement。发现错误的行是:if (levcontent.style.maxHeight){

折叠文本的代码如下:

<style>
    .collapsible {
    height: 40px;
    background-color: #444;
    color: white;
    cursor: pointer;
    padding: 0px 10px 0px 10px;
    margin: 2% 4% 2% 4%;
    width: 93%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    text-transform: capitalize;
}

.lev-active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.lev-active:after {
    content: "\2212";
}

.levcontent {
     padding: 0 18px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
     background-color: #f1f1f1;
}
</style>

<p><button class="collapsible">Levering</button></p>
<div class="levcontent">
<p>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.</p>
</div>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

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

有人知道我做错了什么吗？

Answer 1

按钮是 p 元素的唯一子元素。所以没有nextElementSibling。您可以删除 p 元素或将 levcontent 设置为 this.parentElement.nextElementSibling。

此外，我发现了一个小错别字:您在 else block 中使用了 content.scrollHeight 而不是 levcontent.scrollHeight。

这是修改后的工作代码:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("lev-active");
    var levcontent = this.parentElement.nextElementSibling;
    if (levcontent.style.maxHeight){
      levcontent.style.maxHeight = null;
    } else {
      levcontent.style.maxHeight = levcontent.scrollHeight + "px";
    } 
  });
}

.collapsible {
    height: 40px;
    background-color: #444;
    color: white;
    cursor: pointer;
    padding: 0px 10px 0px 10px;
    margin: 2% 4% 2% 4%;
    width: 93%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    text-transform: capitalize;
}

.lev-active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.lev-active:after {
    content: "\2212";
}

.levcontent {
     padding: 0 18px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
     background-color: #f1f1f1;
}

<p><button class="collapsible">Levering</button></p>
<div class="levcontent">
<p>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.</p>
</div>