隱藏元素屏幕外的部分並點擊屏幕上的推送和顯示

我正在構建一個響應式頁面，在移動設備上查看時，該頁面包含一些常見行爲。隱藏元素屏幕外的部分並點擊屏幕上的推送和顯示

我有一個包含文本和鏈接的元素。文本部分需要覆蓋視口寬度的100％，當點擊/點擊時，鏈接應該將文本內容左移並顯示鏈接。

小提琴：http://jsfiddle.net/Flignats/0n0fwm20/

HTML：

<div id="container"> 
    <div id="block-one"> 
     I'm a bunch of informational text. 
    </div> 
    <div id="block-two"> 
     <a href="#">I'm a link!</a> 
    </div> 
</div>

CSS：

#container { 
    width: 100%; 
    height: 100px; 
} 

#block-one { 
    float: left; 
    width: 75%; 
    height: 100px; 
    background-color: #626366; 
} 
#block-two { 
    float: left; 
    width: 25%; 
    height: 100px; 
    background-color: #969696; 
} 
    #block-two a { 
     color: blue; 
    }

我怎麼能有塊一個跨屏幕的整個寬度，塊的雙隱掉屏幕上，點擊後，將第二塊動畫（邊距？）塊二看到視圖中，塊一被推到左邊？

我很抱歉，如果我在網站上錯過了一個明確的例子，大多數其他問題更復雜。

我不想建立一個jQuery的移動頁面，儘管push和reveal面板可以完成這個動作。如果nganimate比JavaScript更受歡迎，我也使用Angular。

來源

2015-10-06 Flignats

這裏是純CSS的解決方案：http://jsfiddle.net/3wcfggmf/

我用招用label和checkbox:checked如果被點擊或不元素來識別。

input:checked + #block-one { 
    width: 75%; 
}

如果我沒有理解錯的話，請讓我知道，你:)

來源

2015-10-06 21:25:10

非常完美的解決方案！我對OP的問題有不同的理解，好奇地看到誰把它對了:) – bobsoap

我希望我：D我是松鼠reputatuion :) –

讓我給你upvote然後。 – bobsoap

我從一個工作示例分叉的提琴在這裏，我會修改這個純CSS解決方案：http://jsfiddle.net/90gm224q/

添加CSS到你：

#container * { transition: width .4s; } 
#container.clicked #block-one { width:25%; } 
#container.clicked #block-two { width:75%; }

的JS：

var container = document.getElementById('container'), 
    link = document.getElementById('block-two').getElementsByTagName('a')[0]; 

link.onclick = function() { 
    container.className = 'clicked'; 
    return false; 
}

假設我正確理解了你的問題，你可以使用寬度的CSS值來達到你想要的效果。

來源

2015-10-06 21:27:09 bobsoap

幹得好！非常接近，我可能不應該添加鏈接，因爲它有點混亂。該鏈接不需要成爲一個切換，只是顯示。 – Flignats

您可以通過CSS轉換和JavaScript類別切換完成此操作。

演示 - http://jsfiddle.net/Leh5t9t6/

在我的演示，點擊#block-one切換時觸發的CSS transision類。我在演示中包含了一個純JavaScript和jQuery版本（你提到過你不想使用jQuery）。

我也稍微編輯了樣式以適應離屏鏈接。

純JavaScript

var element = document.getElementById('block-one'); 
element.addEventListener('click', function() { 
    this.classList.toggle('reveal'); 
}, false);

jQuery的

$('#block-one').on('click', function(){ 
    $(this).toggleClass('reveal'); 
});

來源

2015-10-06 21:42:02

賓果！我去了一個類切換。不幸的是，我在Rafal Lesniak的後面看到了你的答案，這幫助我找到了更類似於你的解決方案。 – Flignats

@Flignats - 沒問題，如果它看起來像一個很好的答案，upvote將不勝感激;） –

我將不得不回來upvote，我仍然在所需的聲譽數額:) – Flignats

隱藏元素屏幕外的部分並點擊屏幕上的推送和顯示

回答

相關問題