所以我的代码如下所示:
$('.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 :
最佳答案
我试图运行你的 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'
});
}
});
关于javascript - Div 没有填满新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31209201/