jQuery 隐藏和显示带有指示器的 div

Question

使用下面的 jQuery 来切换文本 div 的隐藏和显示:当 div 打开和关闭时，我如何向标题添加某种指示符(例如作为图形的向上和向下箭头)？最好的方法是什么？两个图像？一个 CSS Sprite ？最重要的是:如何将其集成到 JS 中？

我看过其他 jQuery，它为每个 div 分配一个随机数，然后确定哪些是打开的，哪些是关闭的，并切换两个图像之一。但是我在 WordPress 循环中使用 php 来显示帖子，这给循环递增带来了问题，因此必须有一种更简单的方法，不需要更改标题 div 的名称。谢谢....

此 JS 触发显示和隐藏。每个 div 都可以独立展开和折叠。

$(document).ready(function() {
  $('div.demo-show:eq(0)> div').hide();  
  $('div.demo-show:eq(0)> h3').click(function() {
    $(this).next().slideToggle('fast');
  });
});

这是它使用的 HTML:

<div class="collapser">

<p class="title">Header-1 </p>
<div class="contents">Lorem ipsum</div>

<p class="title">Header-2</p>
<div class="contents">Lorem ipsum </div>

<p class="title">Header-3</p>
<div class="contents">Lorem ipsum</div>

</div>

CSS 是任意的:

.collapser {
margin: 0;
padding: 0;
width: 500px;
}

.title {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}

.contents {
padding: 5px 10px;
background-color:#fafafa;
}

Answer 1

您可以使用 toggleClass 方法在点击处理程序上设置类。向上或向下。每个类(class)都会有适当的背景图像集。

在您的点击处理程序中

$('.collapser').toggleClass('up down');

你的 html 看起来像这样

<div class="collapser up">
</div>