jquery - 我将如何着手将某种动态范围计数器应用于 jQuery 和 CSS？

Question

我在这里想要实现的要点是拥有一个文章列表，其中的标题是可点击的，并且通过 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>

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

Answer 1

完成您所追求的目标的最佳方式是仅定位被点击的 anchor 。为此，您可以使用 $(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/