【发布时间】：2013-10-17 05:12:53
【问题描述】：
我的总体目标是让产品页面在productLayout DIV 中显示多张产品图片。然后，该 DIV 中的链接将添加一个类 pL100，它扩展了 DIV 的宽度以显示隐藏在 hidden DIV 中的隐藏内容。然后，我希望初始产品图片消失，隐藏的 DIV 可见。在那个隐藏的 DIV 中，我想要一个链接来再次隐藏该 DIV 并带回带有照片的原始 DIV。但是，我希望所有这一切都根据是否有人点击另一个产品来扩展该产品来切换。如果他们这样做，我希望打开的 DIV 删除 pL100 类，使其原样显示。
截至目前，当点击不同的 DIV 时，我可以关闭所有其他 DIV；但是，我需要帮助隐藏初始内容以及在隐藏内容中添加链接以删除添加的类以恢复正常。如果点击其他 DIV，也可以进行所有这些切换。
我还想为 DIV 的“扩展”和“关闭”设置动画，这样就不会那么突然了。不确定我是否可以这样做，因为我正在使用 addClass 和 removeClass，但如果有办法以不同的方式进行，那么我很想知道如何。
如果您注意到，我每隔 4 个调用一次 productLayout DIV 以删除右侧与 .productLayout:nth-of-type(4n+0) 的边距，因此它很好地位于 container DIV 中。但是，当单击productLayout DIV 时，所有 DIV 都会向下移动（这是我想要的），但是现在每个第 4 个productLayout DIV 都会被推到下一个 DIV 上。有什么办法可以添加回边距，然后将其应用于该行中新的第 4 个productLayout DIV？
我希望这一切都有意义，如果我不清楚，请见谅。我真的很感谢任何帮助，如果我做错了什么，请提出建议。非常感谢。
这是小提琴 - http://jsfiddle.net/pT3DC/
Javascript
$(document).ready(function () {
$('.productLayout a').on('click', function(){
$(this).closest('div').toggleClass('pL100').siblings().removeClass('pL100');
$(this).closest('div').children('.hidden').toggleClass('hide').siblings().removeClass('hide');
});
});
HTML
<div class="container">
<div class="productLayout">
<p><a href="#" class="showMore">Show More 1</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 2</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 3</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 4</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 5</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 6</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 7</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 8</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
</div>
CSS
.container {
width: 1000px;
padding: 0px 16px;
}
.productLayout {
width: 228px;
float: left;
margin: 0px 16px 16px 0px;
text-align: center;
border: 1px solid #333333;
}
.productLayout:nth-of-type(4n+0) {
margin-right: 0px;
}
.pL100 {
width: 936px;
padding: 16px;
color: #000000;
float: left;
margin: 0px 16px 16px 0px;
text-align: center;
border: 1px solid #333333;
}
.hide {
display:none;
}
.hidden {
clear: both;
width: 100%;
background-color: #000000;
color: #FFFFFF;
}
这是小提琴 - http://jsfiddle.net/pT3DC/
【问题讨论】：
标签： html addclass removeclass jquery