0

我为 class=faqQuestion 的元素动态生成一个目录。
答案位于默认隐藏的 class=faqAnswer 元素中。
通过单击 class=faqQuestion 条目，它将显示为

$(this).next(".faqAnswer").slideToggle(300);

一切都按预期工作。

我想要什么：通过单击目录链接，我将跳转到目标 faqQuestion 元素并显示相应的 faqAnweser 元素。

我生成目录的方式：

$(document).ready(function(){
  var url = window.location.pathname;
  $('<ol />').prependTo('#toc')
  $(".faqQuestion").each(function(i) {
    var current = $(this);
    current.attr("id", "entry" + i);
    $("#toc ol").append("<li class=\"faqToc\"><a id='link" + i + "' href='" + url + "#entry" +
      i + "' entry='" + current.attr("tagName") + "'>" + 
      current.html() + "</a></li>");
  });

这是我尝试过的，它将跳转到选定的 faqQuestion，但 faqAnswer 元素仍然隐藏。

  $(".faqToc").click(function(event){
  $(this).next(".faqAnswer").slideToggle(300);
  });

我的问题是这个——至少我是这么认为的——所以我尝试了类似的东西——导致“未定义”

    var url = $(this).prop("href");
    alert(url);

尝试 attr 而不是 prop 返回也“未定义”。

你能指出我的问题吗？

我正在尝试改进我的 Javascript 和 jQuery 知识，所以我不想使用 toc 插件。

更新：HTML 看起来像这样：

<div id="toc">
<ol>
<li class="faqToc">
<a href="/faq/#entry0">...</a>
</li>
<li class="faqToc">
<a href="/faq/#entry1">...</a>
</li>
</div>


<p id="entry0" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

<p id="entry1" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>
4

1 回答 1

0

一个非常简单的方法是使用该index()方法，因为 TOC 元素和问题/答案元素之间的关系是 1 对 1。

$(".faqToc").click(function(event){
  var index=$(this).index(); /* zero based index position of element within it's siblings*/
 /* toggle answer element with same index */
  $(".faqAnswer").eq(index).slideToggle(300);
});

jQuery API 参考：index()

于 2012-10-13T13:34:00.023 回答