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 （包含在$（文档）.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，而是必须使用“转换”，“无”，但会做一些功课并报告我是否发现任何注意事项！

点击更新css transform：scale（）属性

1 个答案: