Wie wird die Spanne beim Anklicken angezeigt?

Question

Das ist mein 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; 
} 

Das ist mein HTML-Code:

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

** Diese Spanne ist eine Spanne von vielen, ich habe 30 über das Problem ist, ich diesen javascript versucht, es funktioniert normalerweise, aber in diesem Fall funktioniert keiner meiner Bereiche, kann jeder sehen, was ich schreibe? Hier ist mein javascript:

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

ich will, wenn ich auf klicken Sie auf "Do I .." das "Nein .." erscheint

Answer 1

try this ....

<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

Achten Sie darauf, Ihr Markup und CSS ist gültig und richtig indended. Es gab mehrere fehlende </span> und </div> Tags. Scheint zu funktionieren mit dem festgelegt ist:

$('.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>