Question

我是jQuery的新手，所以请原谅我，如果我说错了。

我正试图找出通过以下层次结构向后移动的最简单方法。

第一页将显示3个主题：

主题1

主题2

主题3

当您点击每个主题时，它会引导您针对该特定主题提出3个问题。（示例：您单击主题1，所有3个主题都被读取的新列表替换）：

问题1

问题2

问题3

我已经花了很多时间来处理以下代码（针对每个主题重复）：

$(document).ready(function(){
$(".topic_1").click(function(){
 $('div#questions_1').children().show();
$(".topic_1,.topic_2,.topic_3") .remove ();
$(this).unbind("click");
});
});

$(document).ready(function(){
$(".question_1_1").click(function(){
$(".question_1_2,.question_1_3") .hide ();
$(this).unbind("click");
});
})

我无法弄清楚怎么做是创建一个伪链接，当你点击3个问题时会出现，当你点击它时会回到屏幕上只有原来的3个主题，无需重新加载页面。

我希望有一种方法可以写这个，这样可以很容易地添加额外的级别 - 每个级别都会有一个返回上一级别的链接。如果有办法同时拥有前向和后向链接，那就更好了。

我假设有一些方法来写这个，以便你在不同的对象之间切换，但似乎无法让我的大脑围绕如何写它。

我还假设有一种更清晰的方式来编写我正在使用的代码，所以在这方面的任何帮助也将非常感激。

提前感谢您的任何帮助。

根据回复更新了问题：

我担心我可能没有解释我的追求是非常正确的。

当人们点击任何元素时，该级别的所有其他元素都被隐藏并替换为仅被单击的特定元素的兄弟元素。

所以在你的例子中，如果我点击主题1，主题1和主题1主题2将被隐藏，并且“Foo”，“bar”,;和“向上一级”会显示。

在下一个级别，当您点击主题1然后点击foo时，栏也会被隐藏。

最后，我注意到我是从Topic转到Foo还是sub-foo，然后点击sub foo，那里面有2个“Up one level”链接？有没有办法防止这种情况发生？

Answer 1

而不是.remove()您的主题，您可以hide()他们，然后使用click()处理程序在问题区域中创建一个链接/按钮.show()再次提出主题。此外：

没有充分的理由让你取消绑定点击处理程序;只有在重新加载javascript之前，才能使它们无法再被点击。
为了让它可以无限地嵌入主题内部的问题...你可以只有一个类.expandable的类应用于包含标题元素的<div>和任何子元素和<h#> div中的任何.expandable都是可点击的标题，用于显示下一层并隐藏自身。
在文档就绪时间包装您想要执行的所有代码时，只需要$(document).ready(function () {...});。

以下是可嵌套解决方案的示例，其中包含返回级别的链接：

<div class="expandable top">
    <h1>Topic 1</h1>
    <div class="expandable">
        <h1>foo</h1>
        <div class="expandable">
            <h1>sub-foo</h1>
            <div class="expandable">
                Stuff
            </div>
        </div>
    </div>
    <div class="expandable">
        <h1>bar</h1>
    </div>
</div>
<div class="expandable top">
    <h1>Topic 2</h1>
    <div class="expandable">
        <h1>foo2</h1>
        <div class="expandable">
            <h1>sub-foo2</h1>
            <div class="expandable">
                Stuff
            </div>
        </div>
    </div>
    <div class="expandable">
        <h1>bar2</h1>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.expandable').hide().filter('.top').show(); //hide every expandable div except the top one
        $('.expandable h1').click(function () {
            $(this).hide(); //hides the header
            $(this).parent().siblings().hide(); //hide the whole tier
            //show the hidden siblings, then add a link to go back up
            $(this).siblings().show().last().after('<a href="#" class="up-link">Up one level</a>');
            //add a click handler to the new link to reverse what we've just done
            $(this).siblings('a.up-link').click(function () {
                $(this).siblings().hide().filter('h1').show();
                $(this).parent().siblings(':not(h1)').show();
                $(this).remove();
                return false; //prevent event propagation on the link so you don't navigate to #
            });
        });
    });
</script>

使用jquery返回大纲中的上一级别而不重新加载页面

1 个答案: