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是一个锚标记，其背景图像由css设置，类打开关闭。

这就是我对JS的看法：

jQuery(function()
{

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

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

});

Answer 1

应该是这样的（使用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');
  });

});

Answer 2

jsBin demo

查找.prev()并使用.hide()方法，除非您使用 anchors ，否则不需要返回false，但在这种情况下，我建议使用{ {1}}

event.preventDefault()

正确设置使用slideToggle

2 个答案:

jsBin demo