我如何重構這個jQuery代碼爲NOOB

Question

我有下面的代碼，我似乎不能重構：

//opens some drop downs 
    $('#proofreading').mouseover(function(){ 
       $('.proofreading .accordion-body').collapse('show'); 
    }); 


    $('#edit').mouseover(function(){ 
       $('.edit .accordion-body').collapse('show'); 
    }); 


    $('#on_time').mouseover(function(){ 
       $('.on_time .accordion-body').collapse('show'); 
    }); 

下面是在html代碼：

<div class='content-more'> 
<br> 
<span id='proofreading'> 
Read More... 
</span> 
</div> 
<div class='accordion proofreading'> 
<div class='accordion-group'> 
<div class='accordion-body collapse'> 
<div class='accordion-inner'> 
<p class='content-desc'> 
<br> 
When your work is proofread at EAPI we will go over your text word by word, line by line correcting the spelling, punctuation, grammar, terminology, jargon, and semantics. As a result, your writing will be clear, correct, concise, comprehensible, and consistent: the <b>EAPI 5C standard</b>. 
</p> 
</div> 
<br> 
<span class='content-more close-accordion'> 
close 
</span> 
</div> 
</div> 
</div> 

<div class='content-more'> 
<br> 
<span id='edit'> 
read more... 
</span> 
</div> 
<div class='accordion edit'> 
<div class='accordion-group'> 
<div class='accordion-body collapse'> 
<div class='accordion-inner'> 
<p class='content-desc'> 
<br> 
When your work is edited at EAPI we will check and improve the formatting, style and accuracy of the text without altering the intended meaning. 
</p> 
<span class='content-more close-accordion'> 
close 
</span> 
</div> 
</div> 
</div> 

<div class='content-more'> 
<br> 
<span id='on_time'> 
Read more... 
</span> 
</div> 
<div class='accordion on_time'> 
<div class='accordion-group'> 
<div class='accordion-body collapse'> 
<div class='accordion-inner'> 
<p class='content-desc'> 
<br> 
When your work is proofread at EAPI we will go over your text word by word, line by line correcting the spelling, punctuation, grammar, terminology, jargon, and semantics. As a result, your writing will be clear, correct, concise, comprehensible, and consistent: the <b>EAPI 5C standard</b>. 
</p> 
</div> 
<br> 
<span class='content-more close-accordion'> 
close 
</span> 
</div> 
</div> 
</div> 

如何我可以重構代碼，所以我不需要id，只需使用一個類，並減少對三個jquery語句的需求。

Answer 1

將class="accordion-header'加上proofreading,edit和on_timeDIV。然後：

$(".accordion-header").mouseover(function() { 
    $('.' + this.id + ' .accordion-body').collapse('show'); 
});