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>

但它无法正常工作。有时我必须点击多次，有时候里面的图表不像div那样调整大小。（我想要一个适用于所有元素的代码，而不仅仅是一个，所以我想用class而不是id来做。）

我也可以使用angularjs。

谢谢。

Answer 1

使用此：

$(".elementoGrafico").each(function() {
  let panel = this;
  $(this).find(".resize-button").click(function() {
    $(panel).toggleClass("col-md-12");
    $(panel).toggleClass("col-md-6");
  });
});

这样做是为每个面板找到调整大小按钮并为其指定一个更改面板本身的单击处理程序。

在点击（或ng-click）上切换父div上的类

1 个答案: