Question

我正在遵循我在网上找到的关于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？

Repo.js和可折叠元素

0 个答案: