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 に答える