我正在遵循我在网上找到的关于HTML中可折叠元素的食谱:
style.css:
function(){
let i=0;
adduse(newuser(name))=i;
}
collapsible.js:
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 8px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
color: white;
float: left;
margin-right: 10px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover {
background-color: #ccc;
}
.active.collapsible {
background-color: #ddd;
}
.active.collapsible:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 12px;
overflow: hidden;
background-color: #f4f4f4;
max-height: 0;
transition: max-height 0.2s ease-out;
}
这很漂亮,但是与Repo.js一起使用时会出现问题。也就是说,展开可折叠对象后,如果在存储库中打开了较大的文件/文件夹,则元素将不会拉伸(直到您再次折叠并展开该元素)。这是MWE的示例HTML:
index.html:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
要查看此问题,请展开可折叠广告,单击<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="repo.js"></script>
</head>
<body>
<div>
<p>Below is an interesting git repository.</p>
<button type="button" class="collapsible">Repository</button>
<div id="interesting-repo" class="content">
<script>
$('#interesting-repo').repo({user: 'github', name: 'platform-samples'});
</script>
</div>
</div>
<script src="collapsible.js"></script>
</body></html>
,然后再次折叠并展开。然后返回项目根目录(通过单击顶部的LICENSE.txt
)并移至platform-samples
文件夹。您会注意到该元素将永远不会扩展到超过scripts
的大小。当您点击LICENSE.txt
时,它会适当缩小,而当您返回到项目根目录时,它会再次适当地稍微扩展,但是它不会扩展到超过.gitignore
的大小,直到您折叠并展开,然后再放大一些(例如scripts文件夹)。
是否有一种方法可以正确设置最大大小,理想情况下无需编辑(第三方)repo.js?