Question

我一直在阅读这里的一些指南和一些帖子，但似乎无法将它全部放在一起以适应我的情况，我已经很久没有和Jquery一起玩过了，我忘记了它是如何运作的。

我有一个图像.toggle-plus，点击后应显示.hide中的内容，并将图像类更改为.toggle-minus。

我的布局是这样的

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

任何人都可以帮我解释这个过程，感觉就像我再次学习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，那么隐藏的DIV和标题等之间的结构关系就会更加容易。

单击以显示和删除课程

1 个答案: