javascript - 基于 open/close 属性的 HTML Detail 标签高度调整

Question

我有details我想通过 javascript/jquery 调整 css 高度 的标签。如果详细信息标签具有开放属性，则高度将为 200，否则将为 40，但我无法执行此操作。

 $jq("#ProjectQuestionAnswerBottomPanel").click(function(){

           console.log("change occur");
            if($jq("#ProjectQuestionAnswerBottomPanel").attr("open")){
                console.log("open found");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","200px");
            }else{
                console.log("open found");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","");
                $jq("#ProjectQuestionAnswerBottomPanel").css("height","40px");
            }
        });

虽然我的详细信息 html 是

<details class="bottom-panel" id="ProjectQuestionAnswerBottomPanel" style="position: fixed;
        bottom: 80px;
        right: 0px;
        background: rgb(244, 238, 238);
        padding-left:5px;
        color: rgb(180, 17, 17);
        overflow: scroll;
        height: 40px;
        ">
    <div id="ProjectQuestionAnswer">
    </div>
</details>

Answer 1

希望我对你的问题没有任何误解。
您可以使用 css 更改高度

HTML:

<details class="bottom-panel" id="ProjectQuestionAnswerBottomPanel">
    <div id="ProjectQuestionAnswer">
    <p>Answer Here.</p>
    <p>Answer Here.</p>
    <p>Answer Here.</p>
    </div>
</details>

CSS:

details[open]{
  height: 200px;
}

details{
  height: 40px;
}

jsfiddle here .

另外，请注意 IE 和 Edge 不支持 details 标签。 http://caniuse.com/#search=details