Question

我拥有的here (JSFiddle)是2列，每列50％，这将是桌面布局。现在，在移动视口中，通常我们只是将列设为100％，在我的情况下，right列应隐藏。仅在left列中的链接触发时显示。我怎样才能做到这一点？因为我没有线索。

<div class="container">
<div class="col left">
    <p><a href="#">Expand Right Column on mobile only</a></p>
</div>
<div class="col right">
    <p>Content to be showed on desktop and expanded on mobile via trigger above</p>
</div>

Answer 1

@media (max-width: 800px) {
    .left, .right {
        width: 100%;

    }
    .right{display: none;}
}

这应该添加display：none;

Edit1：要显示隐藏的div，请使用此选项：

<div class="container">
    <div class="col left">
        <p><button type="button" 
onclick="document.getElementById('right').style.display = 'block'">
Click Me!</button></p>
    </div>
    <div id="right" class="col right">
        <p>Content to be showed on desktop and expanded on mobile via trigger above</p>
    </div>
</div>

Here's the JSFiddle

编辑2： JSFiddle to toggle the display attribute

在桌面上显示列，在移动设备上触发列

1 个答案: