4

我的总体目标是在产品页面中显示多张产品图片productLayoutDIV 中显示多张产品图片。然后，该 DIV 中的链接将添加一个pL100扩展 DIV 宽度的类，以显示隐藏在 DIV 中的隐藏内容hidden。然后我希望初始产品图片消失并且隐藏的 DIV 可见。在那个隐藏的 DIV 中，我想要一个链接来再次隐藏该 DIV 并带回带有照片的原始 DIV。但是，我希望所有这一切都根据是否有人点击另一个产品来展开该产品来切换。如果他们这样做，我希望打开的 DIV 删除pL100要显示的类，就像它最初一样。

截至目前，当点击不同的 DIV 时，我已经完成了所有的切换以关闭其他 DIV；但是，我需要帮助隐藏初始内容以及在隐藏内容中添加链接以删除添加的类以恢复正常。如果单击其他 DIV，则可以进行所有切换。

我还想为 DIV 的“扩展”和“关闭”设置动画，这样就不会那么突然了。不确定我是否可以这样做，因为我正在使用addClass和removeClass，但是如果有办法以不同的方式进行操作，那么我很想知道如何做。

如果你注意到了，我会每隔 4 个productLayoutDIV 调用一次以删除右侧的边距，.productLayout:nth-of-type(4n+0)以便它很好地位于containerDIV 中。但是，当单击一个productLayoutDIV 时，所有 DIV 都会向下移动（这是我想要的），但是现在每个第 4 个productLayoutDIV 都被推到下一个 DIV 上。有什么方法可以添加回边距，然后将其应用于新的 4thproductLayout行中新的第 4 个 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/

4

1 回答 1

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>
于 2013-10-16T19:44:51.037 回答