jQuery - 单击链接时DIV的toggleClass，隐藏链接，并在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 .productLayout:nth-of-type(4n+0)删除右边的marrgin，这样它就可以很好地放在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/

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>