Question

这是我的CSS：

<div id="FAQQBlock">
<div id="Service" class="faqBlock">
<span>
<h2 class="OldStandard inlineBlock">What You Get When You Order from Epicured</h2>
<span class="faqQABlock">
<span class="faq pointer inlineBlock OldStandard">
<p>Do I have to cook your food myself?</p>
</span>
<span class="faqA inlineBlock OpenSansLight">
<p> Nope! Our chefs have that part covered.</p>
</span>
</span>

这是我的HTML代码：

<script>
$('.faq').click(function() {
  $(this).next().toggle();
});
</script>

**这个跨度是很多的一个跨度，我有超过30个问题是我试过这个javascript，它通常有效，但在这种情况下，我的跨度都没有工作，谁能看到我在做什么写的？这是我的javascript：

{{1}}

我希望当我点击＆＃34;我是...＆＃34; ＆＃34; Nope ..＆＃34;出现

Answer 1

确保您的标记和CSS有效且正确使用。有几个</span>和</div>个标记丢失了。似乎可以解决这个问题：

＆＃13;

$('.faq').click(function() {
  $(this).next().toggle();
});

＆＃13;

.faqBlock {
  margin-bottom: 2em;
}
.faqBlock>span {
  margin-bottom: 40px;
}
.faqBlock h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid #cf5630;
  margin: 0px auto 10px auto;
  font-size: 1.33em;
}
.faqBlock .faq {
  margin: 1em auto 1em auto;
  display: flex;
  flex-flow: column;
  line-height: 1.2em;
  font-size: 1.2em;
}
.faq p {
  border-bottom: 1px solid rgba(123, 26, 29, 0);
}
.faqBlock .faqA {
  display: none;
  transition: all 0.5s ease;
  line-height: 1.2em;
  max-width: 800px;
  margin: 0px auto 1em 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="FAQQBlock">
  <div id="Service" class="faqBlock">
    <span>
      <h2 class="OldStandard inlineBlock">What You Get When You Order from Epicured</h2>
      <span class="faqQABlock">
        <span class="faq pointer inlineBlock OldStandard">
          <p>Do I have to cook your food myself?</p>
        </span>
        <span class="faqA inlineBlock OpenSansLight">
          <p> Nope! Our chefs have that part covered.</p>
        </span>
      </span>
      <span class="faqQABlock">
        <span class="faq pointer inlineBlock OldStandard">
          <p>Do I have to cook your food myself?</p>
        </span>
        <span class="faqA inlineBlock OpenSansLight">
          <p> Nope! Our chefs have that part covered.</p>
        </span>
      </span>
    </span>
  </div>
</div>

＆＃13;

Answer 2

试试这个......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>
    $('.faq').click(function() {
  $(this).next().toggle();
});
</script>

单击时如何显示跨度？

2 个答案: