點擊揭示和消除

Question

類

我已經通過一些導遊和這裏的一些帖子閱讀，但不能似乎把它放在一起我的情況，我還沒有使用jQuery打了這麼長時間的香港專業教育學院忘記了這一切是如何作品。

我有一個圖像.toggle加上，當點擊時，應該揭示.hide內的內容，也改變圖像類爲.toggle減。

我的佈局，像這樣

<div class="widget-header"> 
<h3 class="title">Header 1</h3> 
    <span class="toggle-plus"></span> 
</div> 

<address class="vcard hide"> 
    <!--Content Here--> 
</address> 



<div class="widget-header"> 
<h3 class="title">Header 2</h3> 
    <span class="toggle-plus"></span> 
</div> 

<div class="share-items hide"> 
    <!--content here --> 
</div> 


<div class="widget-header"> 
<h3 class="title">Header 3</h3> 
    <span class="toggle-plus"></span> 
</div> 
<ul class="opening-hours hide"> 
<!--content here --> 
</ul> 

CSS

.hide { 
display:none 
} 

.toggle-plus { 
    background-image:url('/assets/toggle-open.png'); 
width:38px; 
height:38px; 
position: absolute; 
    right: 10px; 
    top: 12px; 
    cursor: pointer; 
} 

.toggle-minus { 
background-image:url('/assets/toggle-close.png'); 
width:38px; 
height:38px; 
position: absolute; 
    right: 10px; 
    top: 12px; 
    cursor: pointer; 
    } 

誰能幫我在這一個解釋的過程中，感覺像IM學習jQuery的再次

感謝

Answer 1

類似於：

$('.widget-header').on('click', '.toggle-plus, .toggle-minus' function(e){ 
    // you can toggle class names here 
    $(this).parents('.widget-header:eq(0)').next('.hide').slideToggle(); 
}); 

這將是一個容易得多，如果這樣，有更多的隱藏層和頭部等

之間的結構關係，你可以結合你的HTML