Question

我正在使用HTML，CSS和JS创建流程图。这是小提琴：

这是我的JS：

var flag = false;
function showdiv(id) {
    var div = document.getElementById(id);
    div.style.display = flag ? 'none' : 'block';
    flag = !flag;
}

它显示图表的根节点，必须单击才能增加级别。

正如您所看到的，显示隐藏的div所需的点击次数存在一些问题。我想帮助解决两件事：

所需的点击次数
当我打开第二阶段和第三阶段时，点击第一阶段应该会打开所有打开的阶段。但是，使用当前的代码，似乎并没有起作用。

Answer 1

通过在实际元素上设置display-flag，您将避免切换全局状态：

function showdiv(id) {
    var div = document.getElementById(id);
    var divFlag = div.expandedFlag == true
    div.style.display = divFlag ? 'none' : 'block';
    div.expandedFlag = !divFlag;
}

甚至更简单，使用元素display-state来决定是否显示/隐藏：

function showdiv(id) {
    var div = document.getElementById(id);
    div.style.display = (div.style.display == 'block') ? 'none' : 'block';
}

包括第2部分：
第二部分。包含一个包含子节点的结构用于递归隐藏：

function showdiv(id) {
    var div = document.getElementById(id);
    var hideFlag = (div.style.display == 'block');
    div.style.display = (hideFlag ? 'none' : 'block');
    if(hideFlag){hideChildren(id)}
}

var children = {
    'two' : ['three-one','three-two']
};

function hideChildren(parent) {
    if(children[parent] !== undefined){
        for(var i = 0; i<children[parent].length; i++){
            var id = children[parent][i]
            document.getElementById(id).style.display = 'none';
            hideChildren(id)
        }
    }
}

Answer 2

对于第2部分，我将再次使用DOM。我同意，如果你打算动态生成它们，它将需要对DOM结构和代码进行一些修改。

但是，对于这个例子，我创建了以下JSFiddle

http://jsfiddle.net/HRedA/15/

<div class="wrapper">
    <div class="stage-one">
        <div class="box node-one"></div>
        <div class="stage-two" id="two" style='display:none'>
            <div class="box node-two">
                <div class="stage-three-one" id="three-one" style="display:none;">
                    <div class="box node-four"></div>
                    <div class="box node-five"></div>
                </div>
            </div>
            <div class="box node-three">
                <div class="stage-three-two" id="three-two" style="display:none;">
                    <div class="box node-six"></div>
                </div>
            </div>
         </div>
     </div>
</div>

因此上面的html减少了，所以它不会使页面混乱，但你会注意到，不是所有元素都处于同一级别，节点就是在流程图结构化的情况下在彼此内部构建的。这意味着当你隐藏父母时，它也会隐藏它的孩子。这有副作用/特征也记住你扩展了什么。例如，如果您隐藏根然后再次显示它，那么之前的所有扩展都将保留。

动态不起作用的原因是所有的线条和方框都是手工定位的。当他们成为其他节点的孩子时，我甚至不得不移动一些。

希望这有帮助。

切换图形的div可见性

2 个答案: