隐藏元素屏幕外的部分并点击屏幕上的推送和显示
我正在构建一个响应式页面,在移动设备上查看时,该页面包含一些常见行为。隐藏元素屏幕外的部分并点击屏幕上的推送和显示
我有一个包含文本和链接的元素。文本部分需要覆盖视口宽度的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。
这里是纯CSS的解决方案:http://jsfiddle.net/3wcfggmf/
我用招用label
和checkbox:checked
如果被点击或不元素来识别。
input:checked + #block-one {
width: 75%;
}
如果我没有理解错的话,请让我知道,你:)
我从一个工作示例分叉的提琴在这里,我会修改这个纯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值来达到你想要的效果。
干得好!非常接近,我可能不应该添加链接,因为它有点混乱。该链接不需要成为一个切换,只是显示。 – 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');
});
非常完美的解决方案!我对OP的问题有不同的理解,好奇地看到谁把它对了:) – bobsoap
我希望我:D我是松鼠reputatuion :) –
让我给你upvote然后。 – bobsoap