Question

我有一个FAQ页面的HTML，看起来像这样：

<dl class="faq_simple ltr">
<dt id="kak-oformit-zakaz-na-sajte" class=""><span class="faq_question_simple_ltr">Toggle 1</span></dt>
<dd class="faq_answer_simple" style="display: none;">
    CONTENT
</dd>
</dl>

<dl class="faq_simple ltr">
    <dt id="kak-vybrat-tovar" class=""><span class="faq_question_simple_ltr">Toggle2</span>
    </dt>
    <dd class="faq_answer_simple" style="display: none;">
    CONTENT 2
    </dd>
</dl>

如您所见，我有一个跨度类“ faq_question_simple_ltr”，我想在单击时显示<dd class="faq_answer_simple>。为此，我添加了一个JS函数：

 <script>
        $(document).ready(function () {
            $(".faq_question_simple_ltr").click(function(){
                $(".faq_answer_simple").toggle();
                })
        })
    </script>

它可以工作，但是会打开页面上的所有“ faq_answer_simple”元素，我尝试将：first-child添加到$(".faq_answer_simple:first-child").toggle();，但是随后完全停止工作。

您能帮我吗，当我使用js toggle（）单击给定父类时，如何打开给定类的第一次出现？功能？

Answer 1

使用实际的代码时，您将.faq_answer_simple用作选择器时将引用所有$(".faq_answer_simple")元素。

您需要在与点击元素相同的父对象内指向右侧的.faq_answer_simple，您可以使用：

$(this).parent().parent().find(".faq_answer_simple").toggle();

演示：

$(document).ready(function() {
  $(".faq_question_simple_ltr").click(function() {
    $(this).parent().parent().find(".faq_answer_simple").toggle();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<dl class="faq_simple ltr">
  <dt id="kak-oformit-zakaz-na-sajte" class=""><span class="faq_question_simple_ltr">Toggle 1</span></dt>
  <dd class="faq_answer_simple" style="display: none;">
    CONTENT
  </dd>
</dl>

<dl class="faq_simple ltr">
  <dt id="kak-vybrat-tovar" class=""><span class="faq_question_simple_ltr">Toggle2</span>
    </dt>
  <dd class="faq_answer_simple" style="display: none;">
    CONTENT 2
  </dd>
</dl>

Answer 2

只需将$(".faq_answer_simple").toggle();行替换为$(this).toggle();

Answer 3

使用jQuery：

$('.faq_answer_simple')[0].toggle()

使用es6：

let firstElem = document.querySelector('.faq_answer_simple')[0];
firstElem.style.display = firstElem.style.display == 'block' ? 'none' : 'block'

实际上，answerchŝdk提供的更好，因为它没有像这样被硬编码。这就像您始终只关心头等舱事故一样。

如何引用js中类的首次出现

3 个答案: