如何使用jquery显示/隐藏特定的多层嵌套div？

Question

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:

And this is my first draft:

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/

If you click on button in div 2, the div 9 should show up.

Any ideas?

---

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").

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.

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.

Answer 1

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 (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 (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');
    });
});

Here is the fiddle: http://jsfiddle.net/6E2Gv/66/

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:

$(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');
    });
});

Here is the fiddle: http://jsfiddle.net/6E2Gv/54/

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).

Here is the fiddle: http://jsfiddle.net/6E2Gv/41/

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.

http://jsfiddle.net/6E2Gv/37/

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".

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:

http://jsfiddle.net/6E2Gv/30/