单击（或 ng-click）时在父 div 上切换类

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

它的作用是找到每个面板的调整大小按钮，并为其分配一个单击处理程序，该处理程序会更改面板本身。