jquery - 使用slideToggle 的正确设置

Question

伙计们，我正在尝试获取帖子列表，其内容不会在页面加载时显示，但在每个 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 是一个 anchor 标记，具有由 css 设置的背景图像和类 open close。

这就是我对 JS 的看法:

jQuery(function()
{

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

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

});

Answer 1

jsBin demo

查找 .prev() 并使用 .hide() 方法，除非使用 anchor ，否则不需要 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]();

  });
   
});