1

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

目前，我正在使用One% CSS Grid让所有 div 出现在一行上，然后根据当前状态和单击的 div 切换不同的 CSS 列类以展开和折叠 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 彼此重叠时，它最好仍能按预期工作。

4

0 回答 0