html - jQuery - 单击链接时切换 DIV 类，隐藏链接并显示 DIV 中的隐藏信息。页面上的多个实例

Question

我的总体目标是让产品页面在 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？

我希望这一切都是有道理的，如果我不清楚，请原谅。我真的很感谢任何帮助，如果我做错了什么，请提出建议。非常感谢。

这是 fiddle - 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;        
}

这是 fiddle - http://jsfiddle.net/pT3DC/

Answer 1

回答

演示:jsFiddle

---

JS

$(document).ready(function () {
    $('.productLayout:nth-of-type(4n+0)').addClass('marginFix');

    $("div .productLayout .show").click(function () {
        $('div .marginFix').removeClass('marginFix');

        $('div .pL100').removeClass('pL100');
        $('.show').removeClass('hide');
        $('div .hidden').addClass('hide');

        $(this).addClass('hide');
        $(this).siblings().removeClass('hide');
        $(this).parent().addClass('pL100');

        // `this` is the DOM element that was clicked
        var index = $("div .show").index(this) + 1;
        $('.productLayout:nth-of-type(4n+' + index + ')').addClass('marginFix');
    });

    $("div .productLayout .hidden").click(function () {
        $('div .marginFix').removeClass('marginFix');
        $('.productLayout:nth-of-type(4n+0)').addClass('marginFix');

        $('div .pL100').removeClass('pL100');
        $('.show').removeClass('hide');
        $('div .hidden').addClass('hide');

        $(this).siblings().removeClass('pL100');
    });
});

---

CSS

.container {
    width: 1000px;
    padding: 0px 16px;
}
.productLayout {
    width: 228px;
    float: left;
    margin: 0px 16px 16px 0px;
    text-align: center;
    border: 1px solid #333333;
}
.marginFix {
    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;
}

---

HTML

<div class="container">
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 1</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 2</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 3</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 4</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 5</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 6</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 7</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 8</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
</div>