javascript - Div 没有填满新内容

Question

所以我的代码如下所示:

$('.profileCont').on('click', '.interestItem', function() {
  event.stopPropagation();
  var interestItem = $(this);
  var ancestor = interestItem.parent().parent();
  ancestor.attr("data-intParent", ancestor.html());

  interestItem.parent().siblings().css("display", "none");

  if (interestItem.parent().hasClass('chosen')) {
    ancestor.hide().html(ancestor.attr("data-intParent")).fadeIn("fast");

  } else {
    interestItem.parent().addClass('chosen');
    interestItem.animate({
      width: '490px',
      height: '180px'
    });
  }
});

.actualInterests {
  background-color: #FFFFFF;
  height: 200px;
  padding: 10px 15px 0 0;
  margin: 0 0 10px 0;
}
.interestCont {
  height: 85px;
  padding: 0 0 0 15px;
  margin: 0 0 10px 0;
}
.interestItem {
  height: 100%;
  padding: 0;
  border-radius: 3px;
  box-shadow: 0 0 1px 0px #C4C4C4;
  position: relative;
}
.interestItem:hover {
  box-shadow: 0 0 2px 1px #C4C4C4;
  cursor: pointer;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="actualInterests intOne col-lg-12 col-md-6  col-sm-12 col-xs-12" data-intParent="one">

  <div class="interestCont col-lg-6 col-md-6  col-sm-6 col-xs-6">

    <div class="interestItem col-lg-12 col-md-12  col-sm-12 col-xs-12">

    </div>

  </div>

  <div class="interestCont col-lg-6 col-md-6  col-sm-6 col-xs-6">

    <div class="interestItem col-lg-12 col-md-12  col-sm-12 col-xs-12">
    </div>

  </div>

  <div class="interestCont col-lg-6 col-md-6  col-sm-6 col-xs-6">

    <div class="interestItem col-lg-12 col-md-12  col-sm-12 col-xs-12">
    </div>

  </div>

  <div class="interestCont col-lg-6 col-md-6  col-sm-6 col-xs-6">

    <div class="interestItem col-lg-12 col-md-12  col-sm-12 col-xs-12">
    </div>

  </div>

</div>

问题是在单击这四个 div 之一后，它会展开，其余部分会隐藏，正如预期的那样，但是当我再次单击它以使其恢复正常时，它似乎不起作用。任何人都可以帮助我确定我做错了什么。

fiddle :

https://jsfiddle.net/mfttg7f7/

Answer 1

我试图运行你的 JS，但是这一行有问题:

var ancestor = interestCont.parent().parent();

我想你的意思是:

var ancestor = interestItem.parent().parent();

这就是我让它工作的方式。我希望这就是您想要的:

$(document).on('click', '.interestItem', function(e) {
    e.preventDefault();
    var interestItem = $(this);
    interestItem.parent().siblings().css("display", "none");

    if (interestItem.parent().hasClass('chosen')) {
        interestItem.animate({
            width: '100%',
            height: '85px'
        });

        interestItem.parent().removeClass('chosen');
        interestItem.parent().siblings().css("display", "block");
    } else {
        interestItem.parent().addClass('chosen');
        interestItem.animate({
            width: '490px',
            height: '180px'
        });
    }
});