Question

我正在尝试创建一行HTML div，当您单击它们时会展开和折叠。请看这个jsFiddle来了解我的意思：http://jsfiddle.net/Lm6Pg/3/。（您可能必须展开结果窗格或使用全屏结果才能使所有div显示在一行中。）

目前，我正在使用One% CSS Grid让所有div出现在一行上，然后切换不同的CSS列类，根据当前状态和点击的div来展开和折叠div。

<div id="content" class="onepcssgrid-1200">
<div class="onerow">
    <div class="tile col4" id="about">
        <h3>About</h3>
        <div class="text">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="tile col4" id="other">
        <h3>Other</h3>
        <div class="text">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="tile col4 last" id="stuff">
        <h3>Stuff</h3>
        <div class="text">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

这是我的javascript（我已经从jsFiddle中的内容改变了它，因为我正在乱搞动态确定需要切换的列类）：

$(".tile").click(function() {
        var tile = $(this);
        var otherTiles = tile.siblings();
        var currentSelectedTile = otherTiles.filter(".selected");
        var unselectedOtherTiles = otherTiles.not(".selected");
        var otherTileWeight, tileWeight;
        if (currentSelectedTile.length) {
            otherTileWeight = 3;
            tileWeight = 3;
        } else {
            otherTileWeight = 4;
            tileWeight = 4;
        }

        tile.toggleClass("selected col" + tileWeight + " col6", 600);
        currentSelectedTile.toggleClass("selected col3 col4", 600);
        unselectedOtherTiles.toggleClass("col" + otherTileWeight + " col3", 600);
    });

这看起来像很多代码可能包含在jQuery UI函数或其他一些库中，当我把它放在一起时我就躲过了。有没有更简单，更简洁，或更简单的方法来做到这一点？解决方案不需要使用jQuery也不需要使用One％CSS Grid，任何库都可以。但是，它确实需要采用响应式布局，当div在彼此之上时，最好仍然可以正常运行。

同时展开/折叠HTML div

0 个答案: