所以我的代码如下所示:
$('.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>
&#13;
问题是在点击这四个div中的一个之后,它会扩展并且其余部分被隐藏,正如预期的那样,但是当我再次单击它以使其恢复正常时它似乎不起作用。任何人都可以帮我识别我做错了什么。
小提琴:
答案 0 :(得分: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'
});
}
});