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

发布于 2024-10-09 17:06:54 字数 1164 浏览 5 评论 0原文

使用下面的 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;
}

原文

Using the jQuery below to toggle the hiding and showing of divs of text: how would I add some sort of indicator - like an up and down arrow as a graphic - to the titles when the divs are either open and closed? What's the best way to do that? Two images? A CSS sprite? And most importantly: how would that be integrated into the JS?

I've looked at other jQuery that assigns a random number to each div and then determines which are open and which are closed and toggles one of two images. But I'm using php in a WordPress loop to show a posts, and that gives problems with incrementing in the loop, so there must be an easier way that doesn't require changes in the name of the title div. Thanks....

This JS fires the showing and hiding. Each div can be expanded and collapsed independently.

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

This is the HTML it works with:

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

The CSS is arbitrary:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光无声 2024-10-16 17:06:54

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

在你的点击处理程序中

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

，你的 html 看起来像这样

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

You could use the toggleClass method to set the class on the click handler. to either up or down. Each class would have the appropriate background image set.

In your click handler