0

我在这里试图实现的要点是有一个文章列表，其中标题是可点击的，并且可以通过 jQuery 扩展和 div 类。就目前而言，它的工作原理是同时将这种效果应用于所有事物，但这显然是不希望的。

这是jQuery：

$(function() {
  $("a.expand").click(function(event) {
    event.preventDefault();
    $(".remainder").slideToggle("fast");
  });
});

CSS：

a.expand {}

.remainder {
  display: none;
}

XHTML：

<ul class="shows">
  <li class="show">
    <div class="showInfo alignLeft">
      <h3><a href="" class="expand">Some Band @ Some Venue</a></h3>
    </div>
    <div class="showDate alignRight"><h3>00/00/0000</h3></div>
    <div class="clear"></div>
    <div id="1" class="remainder">
      w/ Some Other Band. Cover is $ and doors are at 00:00.
    </div>
  </li>
</ul>

任何帮助都会很棒。提前致谢。

4

2 回答 2

1

如果您的意思是您有多组这些并且$(".remainder").slideToggle("fast");正在影响所有这些，那么您需要将其更改为

$(this).parents('.show').children('.remainder').slideToggle("fast");

于 2012-07-31T05:33:51.183 回答
1

做你所追求的最好的方法是只定位被点击的锚点。为此，您可以使用$(this).

这是 jQuery 的样子：

var $expand = $('.expand');

$expand.on('click', function(e) { 
    e.preventDefault(); 
    $(this).closest('.show').find('.remainder').slideToggle('fast'); 
});

我缓存了$('.expand')选择器以提高性能。

下面是一个例子： http: //jsfiddle.net/joshnh/8RwJN/ ​</p>

于 2012-07-31T05:40:11.730 回答