Question

我遇到了这个问题：我想根据用户的选择显示特定的div。 div是嵌套的，最好应该以某个id为目标。

这是我想要在屏幕上显示的算法/站点地图：

Navigation/sitemap http://oi57.tinypic.com/1zq8xhw.jpg

这是我的第一稿：

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添加：

有关详细说明，我想向您展示脚本的使用示例：

想象一下这个算法，例如：

Source: Bone Marrow Transplantation (2003) 32, 459–469. doi:10.1038/sj.bmt.1704163 [图片来自：Bone Marrow Transplantation（2003）32,459-469。 DOI：10.1038 / sj.bmt.1704163]

如果你看一下这个算法的最后几个“项目”，有几种方法可以实现。例如，在右侧，有一个称为“剂量升级/考虑抗性疾病试验”的最后一个“项目”，有两种方法可以达到这个项目（一种是“反应不足”，另一种是“无细胞毒性”响应“）。

使用我在这里搜索的脚本，我想要询问用户，并在屏幕上显示他选择的路径。

我使用简单的标签html结构进行了我的第一次尝试，只是复制了最后的“项目”。这很好，但是很冗余。希望有人能提出更合适的解决方案。

Answer 1

方法4 ：此方法从HTML端的嵌套结构中取出所有div，并使用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/

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

1 个答案: