如何动态扩展可折叠的高度（CSS - Javascript）

Question

我正在尝试通过按下按钮来动态扩展可折叠的大小

这是相关的代码：

HTML :

<button type="button" class="collapsible">Gérer les formules</button>
<div class="form-group content">
    <br />
    <button type="button" class="ajout-formule"><i class="fas fa-plus-circle"> Ajouter une formule</i></button>
    <div class="panel-body add-formule">
    </div>
</div>      

Javascript :

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

CSS :

.collapsible {
    width: 100%;
    background-color: #eee;
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}

.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.collapsible.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

发生的事情是：

• 我打开折叠
• 我按“Ajouter une formule”（意味着添加一个公式）
• 可折叠的大小不会动态变化，但是如果我关闭它并重新打开它，它将具有我想要的适当高度

我想要的是：

• 我打开折叠
• 我按“Ajouter une 公式”
• 可折叠的尺寸动态变化并获得我想要的高度

感谢您的帮助，这可能很愚蠢，但我很新，对此感到抱歉:) 祝您有美好的一天！

 // collapsible 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"; } }); } // add formule $('body').on('click', '.ajout-formule', function() { const $formule = $('<div>').addClass('div-formule'); const $ligne_formule = $('<div>').addClass('ligne-formule'); const $btn_formule = $('<th>'); const $tableau_formule = $('<table class="table" id="formule">'); const $head_formule = $('<thead>'); const $tr_formule = $('<tr>'); $btn_formule.append('<button type="button" class="btn spr-champs"><i class="fas fa-trash"></i></button>'); $btn_formule.append('<button class="btn nbr-champs" type="button"><i class="fas fa-sort-numeric-down"></i></button>'); $btn_formule.append('<button class="btn list-champs" type="button"><i class="far fa-list-alt"></i></button>'); $btn_formule.append('<input type="number" name="champs" id="champs" class="form-control pull-left" value="0"/>'); $tr_formule.append('<th><input type="text" name="titre-formule" id="titre-formule" class="form-control pull-left" /></th>'); $tr_formule.append('<th style="width:16px;padding-bottom: 16px;"><i class="fas fa-equals"></i></th>'); $tr_formule.append($btn_formule); $head_formule.append($tr_formule); $tableau_formule.append($head_formule); $ligne_formule.append('<label class="panel-heading">Introduisez la formule : </label>'); $ligne_formule.append($tableau_formule); $formule.append($ligne_formule); $formule.append('<button type="button" class="btn ajout-champs"><i class="fas fa-plus-circle"> Ajouter un champ</i></button>'); $formule.append('<button type="button" class="btn save-formule"><i class="fas fa-check-square"> Enregistrer</i></button>'); $formule.append('<button type="button" class="btn del-formule"><i class="fas fa-trash"> Supprimer</i></button>') $(this).parent().find('.add-formule').append($formule); }); // add field $('body').on('click', '.ajout-champs', function(event) { const $operateur = $('<select id="operateur">').addClass('ligne-formule operateur').css({"border-radius": "5px","padding-left":"3px","padding-right":"3px","margin-bottom":"5px"}).prop("name","operateur"); const $btn_formule = $('<th>'); const $th_operateur = $('<th>'); var nb_cols = $(this).parent().children(1).children(0).children(1).children(0).children(0).length; console.log(nb_cols); $operateur.append('<option value="plus">&#xf067;</option>'); $operateur.append('<option value="moins">&#xf068;</option>'); $operateur.append('<option value="fois">&#xf00d;</option>'); $operateur.append('<option value="divise">&#xf529;</option>'); $btn_formule.append('<button type="button" class="btn spr-champs"><i class="fas fa-trash"></i></button>'); $btn_formule.append('<button class="btn nbr-champs" type="button"><i class="fas fa-sort-numeric-down"></i></button>'); $btn_formule.append('<button class="btn list-champs" type="button"><i class="far fa-list-alt"></i></button>'); $btn_formule.append('<input type="number" name="champs" id="champs" class="form-control pull-left" value="0"/>'); $th_operateur.append($operateur); if (nb_cols == 2) { $(this).parent().find('.table thead tr').append($btn_formule); } else { $(this).parent().find('.table thead tr').append($th_operateur); $(this).parent().find('.table thead tr').append($btn_formule); } });

 /* Style the header with a grey background and some padding */ * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .header, .collapsible { overflow: hidden; background-color: #f1f1f1; padding: 20px 10px; } .header a, .panel-body button.collapsible { float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; } .header a.logo, .panel-body button.collapsible { font-size: 25px; font-weight: bold; } .header a:hover, .panel-body button.collapsible:hover { background-color: #ddd; color: black; } .header a.active { background-color: dodgerblue; color: white; } .header-right { float: right; } @media screen and (max-width: 500px) { .header a, .panel-body button.collapsible { float: none; display: block; text-align: left; } .header-right { float: none; } } .contenuaccueil { text-align: center; position : absolute; width : 100%; color : black; top:50%; left:50%; transform:translate(-50%,-50%); } .background { margin-top : 10%; margin-bottom : 10%; position:relative; text-align: center; } .img { background-repeat: repeat-x; width: 100%; height: auto; text-align: center; } footer { text-align : center; padding-top: 10px; padding-bottom: 0px; bottom:0; width:100%; color : #A5A5A5; font-family : "Lato", sans-serif; font-size : 15px; font-weight : 400; text-transform : uppercase; text-decoration : none; letter-spacing : 3px; } .box { width:800px; margin:0 auto; } .active_tab1 { background-color:#fff; color:#333; font-weight: 600; } .inactive_tab1 { background-color: #f5f5f5; color: #333; cursor: not-allowed; } .has-error { border-color:#cc0000; background-color:#ffff99; } /* Styles go here */ .table-content { padding: 20px; } .form-control { width: 90px; } /* Style buttons */ .ajout-lig,.ajout-col,.ajout-graph,.ajout-formule,.save-formule,.ajout-champs, .del-formule { background-color: DodgerBlue; /* Blue background */ border: none; /* Remove borders */ color: white; /* White text */ padding: 12px 16px; /* Some padding */ font-size: 16px; /* Set a font size */ cursor: pointer; /* Mouse pointer on hover */ border-radius: 5px; margin-bottom: 1%; } /* Darker background on mouse-over */ .ajout-lig:hover,.ajout-col:hover,.ajout-graph,.ajout-formule,.save-formule,.ajout-champs, .del-formule { background-color: RoyalBlue; } .graph, .formule { display: block; margin : 0.75%; width: 50%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ddd; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .add, .add-formule { background-color: #fff; background-image: none; border: 1px solid transparent; border-radius: 4px; } .div-graph, .div-formule { padding: 15px; background-color: #fff; background-image: none; border: 1px solid #ddd; border-radius: 4px; } .grad, .axe-x, .axe-y { width: 19.7%; display : initial; } .grad { width: 15%; margin-bottom: 5%; } .collapsible { width: 100%; background-color: #eee; } .content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } .collapsible:after { content: '\\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: white; float: right; margin-left: 5px; } .collapsible.active:after { content: "\\2796"; /* Unicode character for "minus" sign (-) */ } #previous_btn_personal_details, #btn_personal_details, .ajout-champs, .save-formule, .del-formule{ margin-top : 2.5%; } .save-formule, .del-formule{ margin-left:1%; float:right; } .operateur { font-family: FontAwesome, sans-serif; -moz-appearance: none; -webkit-appearance: none; } .operateur::-ms-expand{ display:none; } .add-formule, .div-formule{ background-color: #f1f1f1; } .div-formule{ margin-bottom: 2%; }

 <html> <head> <title>Innovatech</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/custom.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://kit.fontawesome.com/38b99a3f0e.js" crossorigin="anonymous"></script> </head> <body> <!-- Contenu du site web --> <div class="contenu"> <br /> <div class="container box"> <br /> <h2 align="center">Création d'un nouvel audit</h2><br /> <?php echo $message; ?> <form method="post" id="register_form"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active_tab1" style="border:1px solid #ccc" id="list_login_details">Informations à propos de l'entreprise</a> </li> <li class="nav-item"> <a class="nav-link inactive_tab1" id="list_personal_details" style="border:1px solid #ccc">Grille d'audit</a> </li> <li class="nav-item"> <a class="nav-link inactive_tab1" id="list_contact_details" style="border:1px solid #ccc">Génération des graphiques</a> </li> </ul> <div class="tab-content" style="margin-top:16px;"> <div class="tab-pane active" id="personal_details"> <div class="panel panel-default"> <div class="panel-heading">Grille d'audit</div> <div class="panel-body"> <button type="button" class="collapsible">Gérer les formules</button> <div class="form-group content"> <br /> <button type="button" class="ajout-formule"><i class="fas fa-plus-circle"> Ajouter une formule</i></button> <div class="panel-body add-formule"> </div> </div> <br /> <div align="center"> <button type="button" name="previous_btn_personal_details" id="previous_btn_personal_details" class="btn btn-default btn-lg">Précédent</button> <button type="button" name="btn_personal_details" id="btn_personal_details" class="btn btn-info btn-lg">Suivant</button> </div> <br /> </div> </div> </div> </div> </form> </div> </div> <!-- Le pied de page --> <footer> <p> Innovatech <?php echo date("Y");?> - All rights reserved </p> </footer> </body> </html>

Answer 1

找到的解决方案：

在 .js 中添加这个

//...
for (var i=0; i<2; i++)
    {
        document.getElementById('collapsible').classList.toggle("active");
        console.log(document.getElementById('collapsible').classList.toggle("active"));
        var content = document.getElementById("content");
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    }

并在 HTML 中添加collapsible和content ID

当通过该Ajouter une formule按钮添加新公式时，这将立即关闭并打开可折叠Ajouter une formule可能有更好的解决方案，但这有效