0

class=faqQuestionの要素のtocを動的に生成します。
答えは、デフォルトで非表示になっているclass=faqAnswer要素にあります。
class = faqQuestionエントリをクリックすると、次のように表示されます。

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

すべてが期待どおりに機能します。

欲しいもの：tocリンクをクリックすると、ターゲットのfaqQuestion要素にジャンプし、対応するfaqAnweser要素が表示されます。

tocを生成する方法：

$(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);

propの代わりにattrを試してみると、「undefined」も返されます。

私の問題を指摘してもらえますか？

JavascriptとjQueryのノウハウを向上させようとしているので、toc-pluginを使用したくありません。

更新：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 に答える