如何在点击时显示跨度？

Question

这是我的CSS：

.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; 
} 

这是我的HTML代码：

<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> 

**这个跨度是很多人的一个跨度，我有超过30的问题是我想这个JavaScript，它通常工作，但在这种情况下，我的跨度没有工作，任何人都可以看到我在做什么写？ 这里是我的javascript：

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

我想，当我点击“难道我......” “没有。”似乎

Answer 1

试试这个....

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


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

Answer 2

确保您的标记和CSS是有效的，正确的indended。有几个缺少</span>和</div>标签。似乎与那个固定的工作：

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

.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; 
 
}

<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>