0

我对 jQuery 很陌生，所以如果我的措辞不正确，请原谅我。

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

第一页将显示 3 个这样的主题：

话题一

话题二

话题 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 和主题 2 都将被隐藏，并且“Foo”、“bar”；并且会显示“上一级”。

在下一个级别，当您单击主题 1，然后单击 foo 时，bar 也将被隐藏。

最后，我注意到如果我从 Topic 到 Foo 到 sub-foo，然后点击 sub foo，那么在 stuff 下会出现 2 个“Up one level”链接？有没有办法防止这种情况发生？

4

1 回答 1

0

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

  1. 您没有充分的理由解除点击处理程序的绑定；这只会使它们在重新加载javascript之前无法再次被点击。
  2. 为了使它与主题内的问题内的问题无限嵌套......你可以将一个这样的类.expandable应用于一个<div>包裹标题元素和任何子元素的类，并且div<h#>内的任何内容都是一个可点击的标题来显示.expandable下一层并隐藏自己。
  3. 您只需要$(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>
于 2013-05-22T21:55:19.757 回答