如何使用 jquery 显示/隐藏特定的多级嵌套 div？
Ude*_*deF 1 html javascript algorithm jquery nested
我被这个问题困住了：我想根据用户的选择显示特定的 div。div 是嵌套的，最好以某个 id 为目标。
这是我想在屏幕上可视化的算法/站点地图：
这是我的初稿：
HTML：
<div class="buttons">
<button class="showButton" target="1">Button 1</button>
<button class="showButton" target="6">Button 2</button>
<button class="showButton" target="3">Button 3</button>
</div>
<div id="div1" class="targetDiv">Content of div 1.<br />
<button class="showButton" target="4">open 4</button>
<button class="showButton" target="5">open 5</button>
<div id="div4" class="targetDiv">This is div 4.</div>
<div id="div5" class="targetDiv">This is div 5.</div>
</div>
<div id="div2" class="targetDiv">Content of div 2.<br/>
<button class="showButton" target="9">open 9</button>
</div>
<div id="div3" class="targetDiv">Content of div 3.<br/>
<button class="showButton" target="6">open 6</button>
<div id="div6" class="targetDiv">Content of div 6.<br />
<button class="showButton" target="9">open 9</button>
<button class="showButton" target="10">open 10</button>
</div>
</div>
JavaScript：
jQuery(function () {
jQuery('.showButton').click(function () {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show('slide');
});
});
http://jsfiddle.net/5TDg9/6E2Gv/
如果您单击 div 2 中的按钮，则应显示 div 9。
有任何想法吗？
在 30.03.14 添加：
为了更详细的解释，我想向您展示脚本的使用示例：
想象一下这个算法，例如：
[图片来自：骨髓移植 (2003) 32, 459–469。doi:10.1038/sj.bmt.1704163]
如果你看一下这个算法三的最后一个“项目”，有几种方法可以到达那里。例如，在右侧，最后一个“项目”称为“剂量升级/考虑针对耐药疾病的试验”，有两种方法可以到达该项目（一个是“反应不足”，另一个是“无细胞源性回复”）。
使用我在这里搜索的脚本，我希望用户被问到要走哪条路并在屏幕上可视化他选择的路径。
我第一次尝试使用简单的标签 html 结构，只是复制最后一个“项目”。这工作正常，但非常多余。希望有人提出更合适的解决方案。
方法四：这个方法把所有的div从HTML端的嵌套结构中取出来，用jQuery重新组织它们出现在页面上的位置。
HTML（我使用了一些简单的注释来帮助定义分支，因为通过简单地查看页面代码它们不再明显（您的图表在这里也会有所帮助）：
<h1>Example of nested divs toggle</h1>
<!-- Top Level Menu -->
<div id="div0" class="buttons">
<button class="showButton" target="1">Button 1</button>
<button class="showButton" target="2">Button 2</button>
<button class="showButton" target="3">Button 3</button>
</div>
<!-- div1 Branch -->
<div id="div1" class="targetDiv">Content of div 1.<br />
<button class="showButton" target="4">open 4</button>
<button class="showButton" target="5">open 5</button>
</div>
<div id="div4" class="targetDiv">Content div 4.</div>
<div id="div5" class="targetDiv">This is div 5.</div>
<!-- div2 Branch -->
<div id="div2" class="targetDiv">Content of div 2.<br/>
<button class="showButton" target="9">open 9</button>
</div>
<!-- div3 Branch -->
<div id="div3" class="targetDiv">Content of div 3.<br/>
<button class="showButton" target="6">open 6</button>
</div>
<div id="div6" class="targetDiv">Content of div 6.<br />
<button class="showButton" target="9">open 9</button>
<button class="showButton" target="10">open 10</button>
</div>
<div id="div9" class="targetDiv">Content of div 9.<br/></div>
<div id="div10" class="targetDiv">Content of div 10.<br/></div>
Javascript（在这个集合中，我使用一个数组来跟踪您当前显示的菜单项。然后反向遍历该数组以删除不再有效的菜单项（在更高步骤更改路径的情况下） .然后我用insertAfter重新组织HTML元素在菜单结构中的位置）：
//declare array with divs to show
var menuArray = ['0'];
$(function () {
$('.showButton').click(function () {
//get target div to show
var targetID = $(this).attr('target');
//hide all divs
$('.targetDiv').hide();
//show all menu items in chain
var found = false;
//get containing div target number
var current = $(this).parent().attr('id').toString().charAt(3);
var length = menuArray.length;
//remove elements of array lower than clicked button
for(var i=0; i<length; i++) {
//check if next menu item is a button just pressed and never delete root menu (elem == 0)
if(menuArray[0] == current || menuArray[0] == 0) {
found = true;
}
//hide div if no longer in menu structure and remove from menuArray[0]
if(!found) {
$('#div' + menuArray[0]).hide();
menuArray.shift();
}
};
//add new target to beginning of array
menuArray.unshift(targetID);
//show each element in the menu structure
menuArray.forEach(function(elem, index) {
if(index != 0) {
$('#div' + elem).show();
}
});
//get div of target to show sliding effect
var targetDiv = $('#div' + menuArray[0]);
//show the div as the last element on the page
targetDiv.insertAfter('#div' + menuArray[1]);
//slide out last div
targetDiv.show('slide');
});
});
这是小提琴：http : //jsfiddle.net/6E2Gv/66/
方法 3：此方法使用 parent() 来显示菜单结构的 div。我也回到了你原来的命名结构，以防你仍然想使用它。
HTML：
<h1>Example of nested divs toggle</h1>
<div class="buttons">
<button class="showButton" target="1">Button 1</button>
<button class="showButton" target="2">Button 2</button>
<button class="showButton" target="3">Button 3</button>
</div>
<div id="div1" class="targetDiv">Content of div 1.<br />
<button class="showButton" target="4">open 4</button>
<button class="showButton" target="5">open 5</button>
<div id="div4" class="targetDiv">Content div 4.<br />
<div id="div10" class="targetDiv">Content of div 10.<br/></div>
</div>
<div id="div5" class="targetDiv">This is div 5.</div>
</div>
<div id="div2" class="targetDiv">Content of div 2.<br/>
<button class="showButton" target="9">open 9</button>
</div>
<div id="div3" class="targetDiv">Content of div 3.<br/>
<button class="showButton" target="6">open 6</button>
<div id="div6" class="targetDiv">Content of div 6.<br />
<button class="showButton" target="9">open 9</button>
<button class="showButton" target="10">open 10</button>
<div id="div9" class="targetDiv">Content of div 9.<br/>
</div>
</div>
</div>
Javascript：
$(function () {
$('.showButton').click(function () {
//hide all divs
$('.targetDiv').hide();
//get div of target number
var targetDiv = $('#div' + $(this).attr('target'));
var targetDivParent = targetDiv;
while(targetDivParent.parent().attr('id')) {
//show parent div
targetDivParent.parent().show();
//get next parent
targetDivParent = targetDivParent.parent();
}
//slide out last div
targetDiv.show('slide');
});
});
这是小提琴：http : //jsfiddle.net/6E2Gv/54/
方法 2：好的，这里有一个不需要更改 javascript 的版本，但需要您适当地标记分支。（例如：如果 div 04 嵌套在 01 中，则需要将其命名为 '01-04' 以显示其路径）。
这是小提琴：http : //jsfiddle.net/6E2Gv/41/
方法 1：这是一个适用于您的菜单结构的版本。这有点乏味，但我使用 switch 语句来显示适当的嵌套菜单。
原帖：您需要显示整个菜单结构吗？如果是这样，当隐藏所有“.targetDiv”时，您对嵌套 div 的使用将不起作用。
但是，如果您不需要整个菜单结构，您可以从嵌套中取出所有 div，只显示顶层和选定的一个，如下所示：