如何讓標題在這個codepen中單獨工作

Question

我正在看的codepen是這樣的。 http://codepen.io/candygong/pen/OMZqNZ

我想知道如何讓標題互相分開工作（例如，當你點擊一個另一個不滑落）。我知道我可以爲每個分配不同的類，但我想知道如何更有效地做到這一點，因爲我打算使用許多不同的頭文件，所以我想使用相同的類而不是爲每個實例創建一個類。

HTML代碼

<section> 
<h1 class="question">q: what is this: hahahahplop?</h1> 
<p class="answer"><span>a: someone laughing their head off!</span></p> 
</section> 

<section> 
<h1 class="question">q: what is this: hahahahplop?</h1> 
<p class="answer"><span>a: someone laughing their head off!</span></p> 
</section> 

CSS代碼

* { 
margin: 0px; 
padding: 0px; 
} 

body { 
font-family: 'Roboto', sans-serif; 
font-size: 20px; 
color: #555; 
} 

section { 
width: 5in; 
margin: 24px auto; 
text-align: center; 
} 

section h1.question { 
color: white; 
background-color: purple; 
padding: 24px; 
font-weight: 500; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
} 

section p.answer { 
border: 1px gray solid; 
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px; 
padding:36px 0px; 
} 

Javascript代碼

$(function() { 
console.log("ready"); 

$('section p.answer').hide(); 
$('section p.answer span').hide(); 

$('section h1.question').click(function(){ 

$('section p.answer').slideToggle(); 
$('section p.answer span').fadeToggle(); 
}) 
}); 

我知道你應該能夠使用這個關鍵字，但我一直無法得到它自己工作。

Answer 1

因爲有兩個不同的「部分p.answer」對象，你需要獲得點擊正確的：

$(function() { 
 
    //hide the answer 
 
    $('section p.answer').hide(); 
 
    $('section p.answer span').hide(); 
 
    //listen for a click on the question: same event attached to more objects 
 
    $('section h1.question').click(function(e){ 
 
    // get the only one parent on which you clicked 
 
    var sectionObj = $(this).parent('section'); 
 
    
 
    // act only on the corresponding children 
 
    sectionObj.find('p.answer').slideToggle(); 
 
    sectionObj.find('p.answer span').fadeToggle(); 
 
    }) 
 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 20px; 
 
    color: #555; 
 
} 
 

 
section { 
 
    width: 5in; 
 
    margin: 24px auto; 
 
    text-align: center; 
 
} 
 

 
section h1.question { 
 
    color: white; 
 
    background-color: purple; 
 
    padding: 24px; 
 
    font-weight: 500; 
 
    border-top-left-radius: 10px; 
 
    border-top-right-radius: 10px; 
 
} 
 

 
section p.answer { 
 
    border: 1px gray solid; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    padding:36px 0px; 
 
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
<section> 
 
    <h1 class="question">q: what is this: hahahahplop?</h1> 
 

 
    <p class="answer"><span>a: someone laughing their head off!</span></p> 
 
</section> 
 

 
<section> 
 
    <h1 class="question">q: what is this: hahahahplop?</h1> 
 

 
    <p class="answer"><span>a: someone laughing their head off!</span></p> 
 
</section>

Answer 2

的問題是在選擇你要顯示的元素/ hide：你選擇不需要的元素，修復通過this訪問它們的問題，並在點擊處理程序中使用siblings method，所以基本上你必須替換的點擊處理程序中的行：

$('section p.answer').slideToggle(); 
$('section p.answer span').fadeToggle(); 

到

$(this).siblings('p.answer').slideToggle(); 
$(this).siblings('p.answer span').fadeToggle(); 

查看code pen

工作的代碼段