HTML根據打開/關閉屬性詳細標記高度調整

我有details標記css高度我想通過javascript/jquery進行調整。如果details標籤具有open屬性，那麼height將是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

我希望我沒有你的問題的任何誤解。
您可以通過使用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

來源

2016-11-23 08:03:04

其amazign的感謝！我不能通過我的身份證限制？ –

當然是的。然後，「細節[open]」變成「細節[open] #yourid」，「細節」變成「細節＃yourid」。此外，這篇文章可能會幫助你https://css-tricks.com/almanac/selectors/a/attribute/ –

愛你我的孩子。歡迎使用您的第一個投票和接受的答案的計算器。謝謝 –

這是正確的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中工作！ @MohammadFaizanKhan – SaidbakR

HTML根據打開/關閉屬性詳細標記高度調整

回答

相關問題