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

【问题标题】：jQuery to hide and show divs with an indicatorjQuery 隐藏和显示带有指示器的 div
【发布时间】：2010-12-28 04:52:51
【问题描述】：

使用下面的 jQuery 来切换文本 div 的隐藏和显示：当 div 打开和关闭时，我如何向标题添加某种指示符（例如向上和向下箭头作为图形）？最好的方法是什么？两张图？一个 CSS 精灵？最重要的是：如何将其集成到 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;
}

【问题讨论】：

标签： jquery css show-hide

【解决方案1】：

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

在您的点击处理程序中

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

你的 html 看起来像这样

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

【讨论】：

谢谢，这是一种巧妙的方法。我之前没见过toggleclass。