如何使用jquery顯示/隱藏特定的多層嵌套div？

Question

我遇到了這個問題：我想根據用戶的選擇顯示特定的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]

如果您看一下算法3的最后一個“項目”，那么有幾種方法可以到達那里。 例如，在右側，有一個最后的“項目”，稱為“針對耐葯性疾病的劑量遞增/考慮試驗”，並且有兩種方法可以達到該目的（一種是“反應不足”，另一種是“無細胞原性”）。響應”）。

借助我在這里搜索的腳本，我希望以一種通向用戶的方式詢問用戶，並在屏幕上可視化他選擇的路徑。

我用一個簡單的html標簽結構進行了第一次嘗試，只是復制了最后一個“項目”。 這可以正常工作，但是非常多余。 希望有人提出一個更合適的解決方案。

Answer 1

方法4 ：此方法將所有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語句顯示了適當的嵌套菜單。

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

原帖 ：您需要顯示整個菜單結構嗎？ 如果是這樣，則在隱藏所有“ .targetDiv”時無法使用嵌套的div。

但是，如果您不需要整個菜單結構，則可以將所有div從嵌套中移出，僅顯示頂層並選擇其中一個，如下所示：

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