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 设置的背景图像和类打开关闭。

这就是我为 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()并使用方法，除非您使用anchors.hide() ，否则您不需要 return 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 回答