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

如果你的意思是你有多套这些并且$(".remainder").slideToggle("fast");影响了所有这些，那么你需要将它改为

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

Answer 2

执行所需操作的最佳方法是仅定位要单击的锚点。为此，您可以使用$(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/

我如何将一些动态范围计数器应用于jQuery和CSS？

2 个答案: