Javascript 基于打开/关闭属性的HTML细节标记高度调整_Javascript_Jquery_Html_Css

Javascript 基于打开/关闭属性的HTML细节标记高度调整

javascript jquery html css

Javascript 基于打开/关闭属性的HTML细节标记高度调整,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个标签，我想通过javascript/jquery来调整它的css高度。如果details标签具有open属性，则高度将为200，否则将为40，但我无法执行此操作 $jq("#ProjectQuestionAnswerBottomPanel").click(function(){ console.log("change occur"); if($jq("#ProjectQuestionAnswerBottomPanel").attr("op

我有一个标签，我想通过javascript/jquery来调整它的css高度。如果details标签具有open属性，则高度将为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>

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

HTML:

jsfiddle

另外，请注意IE和Edge不支持

详细信息标记。
这是正确的Jquery和HTML代码：
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
  <script>
    $("#ProjectQuestionAnswerBottomPanel").click(function(){

           console.log("change occur");
            if(typeof $(this).attr("open") !== 'undefined'){
                console.log("open found");
                $(this).css("height","");
                $(this).css("height","200px");
            }else{
                console.log("open Not found");
                $(this).css("height","");
                $(this).css("height","40px");
            }
        });
  </script>
</body>
</html>


JS-Bin
$（“#项目问题解答底部面板”）。单击（函数（）{
控制台日志（“发生更改”）；
if（typeof$（this）.attr（“打开”）！==“未定义”）{
控制台日志（“打开找到”）；
$（this.css（“height”，”）；
$（this.css（“高度”，“200px”）；
}否则{
控制台日志（“未找到打开”）；
$（this.css（“height”，”）；
$（this.css（“高度”，“40px”）；
}
});

检查一下，当然可以。然后，“详细信息[打开]”变成“详细信息[打开]#您的ID”，“详细信息”变成“详细信息#您的ID”。还有，这篇文章可能会帮助你爱你，我的孩子。欢迎来到stackoverflow，给出您的第一个投票并被接受的答案。！谢谢
details[open]{
  height: 200px;
}

details{
  height: 40px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
  <script>
    $("#ProjectQuestionAnswerBottomPanel").click(function(){

           console.log("change occur");
            if(typeof $(this).attr("open") !== 'undefined'){
                console.log("open found");
                $(this).css("height","");
                $(this).css("height","200px");
            }else{
                console.log("open Not found");
                $(this).css("height","");
                $(this).css("height","40px");
            }
        });
  </script>
</body>
</html>