下拉扩展按钮JavaScript

Question

我正在创建一个按钮单击时滑出的div，然后再次单击该按钮时缩回。

经过测试，问题出在我的JavaScript代码中，请参阅下文。

#containerExtension {
    height:0px;
    overflow: hidden
}

#containerExtension.show {
    height:auto;
}

var extension = document.querySelector("#containerExtension");
var extensionButton = document.querySelector("#extensionButton");

extensionButton.addEventListener("click", showHide, false);

function showHide(){
    if(extension.classList.contains("show"){
        extension.classList.remove("show");
    }else{
        extension.classList.add("show");
    }
}

Answer 1

您在)函数中的条件中缺少结束showHide()。应该是：

function showHide(){
    if(extension.classList.contains("show")){
        extension.classList.remove("show");
    }else{
        extension.classList.add("show");
    }
}