如何显示/隐藏特定的多级嵌套的div使用jQuery？ [英] How to show/hide specific multi-level nested divs with jquery?
问题描述
我只能和这个问题：我想说明这取决于用户的选择特定的div的。 div的被一些ID嵌套，并最好要有针对性。
i'm stuck with this problem: I want to show specific div's depending on the choice of the user. The div's are nested and best should be targeted by some id.
这是算法/网站地图我要显示在屏幕上：
This is the algorithm/sitemap i want to visualize on the screen:
这是我的第一稿：
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的：
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应该显示出来。
If you click on button in div 2, the div 9 should show up.
任何想法？
加在14年3月30日：
added on 30.03.14:
有关更详细的解释，我想告诉你使用的脚本的例子：
For more detailed explanation, i want to show you an example of usage for the script:
想象一下这个算法，例如：
Imagine this algorithm for example :
[Image from: Bone Marrow Transplantation (2003) 32, 459–469. doi:10.1038/sj.bmt.1704163]
如果你看一下这个算法三个最后一个项目，有几种方法可以到达。在右侧的例子，有一个最后的项被称为剂量升级/考虑试验的耐病有两种方式获得此文件（其中一个是在反应不足，另一个是在无细胞遗传学响应）。
If you look at the last "items" of this algorithm three, there are several ways to get there. On the right side for example, there is one last "item" called "Dose escalate/consider trials for resistant disease" and there are two ways to get to this item (one is over "inadequate response" the other is over "No cytogenic response").
通过脚本我在寻找在这里，我希望用户被要求至极的路要走，并以可视化的画面上他choosen路径。
With the script I'm searching for here, I want the user to be asked wich way to go and to visualize his choosen path on the screen.
我第一次尝试用一个简单的HTML标签的结构，只是重复过去的项目。这工作正常，但也相当多余。希望有人来了一个更合适的解决方案。
I made my first attempts with a simple tabs html structure and just duplicating the last "items". This works fine but is quite redundant. Hope someone comes up with a more suitable solution.
推荐答案
方法4 ：这个方法需要所有的div出的HTML端嵌套结构，并使用jQuery的重新组织在那里他们出现在页面上。
Method 4: This method takes all the divs out of the nested structure on the HTML side, and uses jQuery to re-organize where they appear on the page.
HTML（我用了一些简单的意见，以帮助确定树枝，因为它们不再明显，只需查看页面code（你的图也将有所帮助这里））：
HTML (I've used some simple comments to help define the branches, since they are no longer obvious by simply viewing the page code (your diagram will also be helpful here)):
<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元素的位置）：
Javascript (In this set, I use an array to keep track of which menu items you are currently showing. Then reverse-traverse that array to remove menu items which are no longer valid (in the case of changing the path at a higher step). Then I use insertAfter to re-organize the position of the HTML element within the menu structure):
//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 ：此方法使用父（）来显示的div弹出的菜单结构。我也回到了原来的命名结构，如果你仍然想使用它。
Method 3: This method uses the parent() to show divs up the menu structure. I also returned to your original naming structure, in case you still wanted to use it.
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的：
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将不需要改变一个版本，但是这需要我们正确标注你的分支。 （例：如果格04嵌套在01，它需要被命名为'01 -04'，以显示其路径）
Method 2: OK, so here's a version where the javascript will not need changed, but requires you to label your branches appropriately. (Ex: if div 04 is nested inside 01, it needs to be named '01-04' to show its path).
下面是小提琴： http://jsfiddle.net/6E2Gv/41/
方法1 ：这里有一个与你的菜单结构工程的版本。这是一个有点乏味，但我用switch语句来显示相应的嵌套的菜单中。
Method 1: Here's a version that works with your menu structure. It's a little more tedious, but I used the switch statement to show the appropriate nested menus.
原贴：你需要整个菜单结构展现出来？如果是这样，同时隐藏所有的.targetDiv你嵌套的div的使用将无法正常工作。
Original Post: Do you need the entire menu structure to show up? If so, your usage of nested divs won't work while hiding all ".targetDiv".
不过，如果你并不需要整个菜单结构，可以采取一切的div出巢，只显示前水平，选择之一，这样的：
However, if you don't need the entire menu structure, you could take all the divs out of the nests and only show the top level and selected one, as such:
这篇关于如何显示/隐藏特定的多级嵌套的div使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
