顯示在桌面上的列，觸發移動列

我有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>

來源

2015-09-29 Vadim Badea

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

    } 
    .right{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

EDIT2：JSFiddle to toggle the display attribute

來源

2015-09-29 08:12:57

試試我的編輯，讓我知道，如果它不是你所需要的。 –

好的，現在我明白了。但是如果我想再次隱藏它呢？我怎樣才能做到這一點？ –

http://jsfiddle.net/01991tj3/2/試試這個（也是編輯答案） –

顯示在桌面上的列，觸發移動列

回答

相關問題