Javascript 单击以显示和删除类

我一直在阅读一些指南和这里的一些帖子，但似乎无法根据我的情况将它们全部放在一起，我已经很长时间没有使用Jquery了，我已经忘记了它是如何工作的

我有一个image.toggle plus，单击它时应该会显示其中的内容。hide并将image类更改为.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>

有人能帮我解释一下这个过程吗，感觉我又在学习Jquery了吗

谢谢你，类似于：

$('.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，那么隐藏的div和头文件之间的结构关系就容易多了

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