オープン/クローズ属性に基づくHTML詳細タグの高さ調整

detailsタグcssの高さ javascript/jqueryで調整したい。詳細タグに属性がある場合、高さは200になります。それ以外の場合は40になりますが、これはできません。オープン/クローズ属性に基づくHTML詳細タグの高さ調整

$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>

出典

2016-11-23 Muhammad Faizan Khan

チェックこのアウトhttps://jsfiddle.net/5evfa9k1/ – razorranjan

ている間、私は私はあなたの質問のいずれかの誤解を持っていないことを望みます。
あなたは

HTML、CSSを使って、高さを変更することができます。

<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。

また、detailsタグがIEおよびEdgeでサポートされていないことに注意してください。 http://caniuse.com/#search=details

出典

2016-11-23 08:03:04

そのamazign感謝！私は自分のIDを制限できないのですか？ –

もちろん、はい。そして、「詳細」が「詳細」に、「詳細」が「詳細」になります。また、この記事はhttps://css-tricks.com/almanac/selectors/a/attribute/ –

あなたを愛してくれます。あなたの最初の投票と受け入れられた答えと一緒にstackoverflowへようこそ！ありがとう –

これで正しい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>

JSBIN

出典

2016-11-23 08:07:04 SaidbakR

それはうまくいきませんでした。同じ問題 –

JSBINで動作します！ @モハマドファザンカン – SaidbakR

オープン/クローズ属性に基づくHTML詳細タグの高さ調整

答えて

関連する問題