2

投稿のリストを取得しようとしていますが、そのコンテンツはページの読み込み時に表示されませんが、各 div 内には、その特定の投稿だけを展開する展開ボタンがあります。これが私がこれまでに持っているコードです:

<div class="postEntry">

    <div class="collapsibleContent">
         <div class="postContent"></div>
    </div>

    <div class="actionDiv">
        <span id="actionWording">Read More</span>
        <a href="#" id="actionLink" class="open"></a>
    </div>

</div>

<div class="postEntry">

    <div class="collapsibleContent">
         <div class="postContent"></div>
    </div>

    <div class="actionDiv">
        <span id="actionWording">Read More</span>
        <a href="#" id="actionLink" class="open"></a>
    </div>

</div>

コンテンツが表示されるように actionDiv をクリック可能にしたいのですが、コンテンツが展開されている場合は actionWording 内の文言が COLLAPSE に変更されます。actionLink は css で設定された背景画像とクラス open close を持つアンカータグです。

これは私がJSのために持っているものです:

jQuery(function()
{

  $('.collapsibleContent').each(function() {
    $(this).css('display', 'none');
  });

  $('.actionButton').click(function() {
    $(this).next('.collapsibleContent').slideToggle('fast')
    return false;
  });

});
4

2 に答える 2

2

このようにする必要があります（を使用してparent()）：

$(document).ready(function()
{
  $('.collapsibleContent').css('display', 'none');

  $('.actionButton').click(function() {
    $(this).parent().find('.collapsibleContent').slideToggle('fast');
    if ( $(this).html() == 'COLLAPSE' )
      $(this).html('EXPAND');
    else
      $(this).html('COLLAPSE');
  });

});
于 2012-11-07T19:22:52.540 に答える
2

jsBinデモ

メソッドを探して.prev()使用します。アンカー.hide()を使用しない限り、falseを返す必要はありませんが、その場合は、を使用することをお勧めします。event.preventDefault()

$(function(){

  $('.collapsibleContent').hide();
  
  $('.actionButton').click(function( ev ) {
      ev.preventDefault();

      var visible = $(this).prev('.collapsibleContent').is(':visible'),
         slideTog = visible?'slideUp':'slideDown',
              txt = visible?'EXPAND':'COLLAPSE';
       
      $('.collapsibleContent').slideUp().next('.actionButton').text('EXPAND');
      
      $(this).text( txt ).prev('.collapsibleContent')[slideTog]();

  });
   
});
于 2012-11-07T19:23:29.563 に答える