Javascript Repo.js和可折叠元素_Javascript_Html_Css_Repo

Javascript Repo.js和可折叠元素

javascript html css

Javascript Repo.js和可折叠元素,javascript,html,css,repo,Javascript,Html,Css,Repo,我正在遵循我在网上找到的HTML中可折叠元素的配方： style.css： /* 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;

我正在遵循我在网上找到的HTML中可折叠元素的配方：

style.css：

/* 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;
}

可折叠的.js：

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";
    }
  });
}

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i


这工作得很好，但是与一起使用时有问题。也就是说，在展开可折叠文件后，如果在存储库中打开较大的文件/文件夹，则该元素不会拉伸（直到您再次折叠并展开该元素）。以下是MWE的HTML示例：
index.html：
<!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>


试验
下面是一个有趣的git存储库
存储库
$（#有趣的repo'）.repo（{user:'github'，name:'platform samples'}）；

要查看问题，请展开可折叠文件，单击LICENSE.txt
，然后再次折叠和展开。然后返回到项目根目录（通过单击顶部的platform samples
），并进入scripts
文件夹。您会注意到，元素的大小永远不会超过LICENSE.txt
。当您单击.gitignore
时，它会适当地收缩，当您返回到项目根目录时，它会适当地再次略微展开，但它永远不会超出LICENSE.txt
的大小，直到在打开较大的文件（例如脚本文件夹）时折叠和展开
是否有一种方法可以正确设置最大大小，理想情况下无需编辑（第三方）repo.js