Question

我有一些可折叠的面板，我想添加一个调整大小按钮。为此，我已经制作了这个javascript代码：

function myFunction () {
    $(".elementoGrafico").click(function () {
        $(this).toggleClass("col-md-12");
        $(this).toggleClass("col-md-6");
    });
};

html代码是：

<div class="col-md-12 ui-state-default elementoGrafico">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading ">
                <h4 class="panel-title">
           <a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
                   <a href="#" class="component-button resize-button glyphicon glyphicon-resize-small" onclick="myFunction.call(this)"></a>
                   Gráfico 1
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
            </div>
    </div>
    </div>
</div>

但它不起作用。怎么能让它起作用？（我想要一个适用于所有元素的代码，而不仅仅是一个，所以我想用class而不是id来做。）

谢谢。

Answer 1

“elemnto1”不是你抓住每节课的方式，你错过了这段时间

$(".elemento1").each()

编辑：

$(".elemento1").click(function() {
    $(this).toggle("col-md-12");
    $(this).toggle("col-md-6");
});

Answer 2

function myFunction () {
    $( "elemento1" ).each(function() {
        $(this).toggleClass("col-md-12");
        $(this).toggleClass("col-md-6");
    });
};

在调整大小按钮单击时添加和删除类

2 个答案: