javascript - 未捕获到的TypeError:无法读取HTMLButtonElement上null的属性“样式”。<匿名>

以下代码（用于可折叠文本）抛出以下错误：未捕获的TypeError：无法读取HTMLButtonElement的null的'style'属性。发现错误的行是：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>

有谁知道我在做什么错？

最佳答案

该按钮是p元素的唯一子级。因此没有nextElementSibling。
您可以删除p元素，也可以将levcontent设置为this.parentElement.nextElementSibling。

此外，我发现了一个拼写错误：您在else块中使用了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>

关于javascript - 未捕获到的TypeError:无法读取HTMLButtonElement上null的属性“样式”。<匿名>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50485340/