javascript - 单击更新 css 转换 : scale() property

Question

我创建了一个组织结构图，其中顶级节点的比例为 1.5(所有其他子/兄弟节点的比例设置为 1)。我有一个展开所有节点按钮，当我单击它时，在组织结构图出现之前，我想将顶级节点比例返回到 1(因此它与现在展开的节点大小相同)但是对于我无法改变我的生活。

我已经尝试应用不同级别的特异性，使用 !important 声明和各种 jQuery hackery，但无济于事。以下是有问题的代码:

CSS

/*Top Level Node*/
.orgchart .node:first-child {
  transform: scale(1.5);
}

/*All Other Nodes*/
tr.nodes td table tr td div.node {
 transform: scale(1) !important;
}

jQuery(包装在 $(document).ready(function() {});

'use strict';

(function($){

  $(function() {

    var datascource = {...};

    var orgChartInstantiation = function() {

        var options = {...};

        // ********************
        // Expand all nodes
        // in company org chart
        // ********************

        $("button#expandNodesButton.btn.btn-default").on("click", function() {

            //
            // Code below is what I'm having an issue with
            //
            $("div.node.first-level.topLevelNode").css("transform", "scale(1)");

            var options = {...};

            $("#my-org-chart").empty(); //clear previous contents 
            $("button#expandNodesButton.btn.btn-default").toggle(); //toggle display for corresponding collapse button
            $("button#collapseNodesButton.btn.btn-default").css("display", "block");

            $("#my-org-chart").orgchart(options);

        });

    };

    orgChartInstantiation();

  });

})(jQuery);

非常感谢任何帮助!

Answer 1

好的，所以我能够找到一个可行的解决方案(虽然可能不是很优雅，但仍然有效)。

而不是尝试通过以下方式将比例更改回 1:

$(".orgchart .node:first-child").css("tranform", "scale(1)");

我能够做到:

$(".orgchart .node:first-child").css("transform", "none");

我不确定我是否理解为什么我不能将比例重置为 1 而不得不使用“转换”、“无”，但如果我发现任何值得注意的地方，我会做一些功课并报告回来!