隐藏元素屏幕外的部分并点击屏幕上的推送和显示

我正在构建一个响应式页面，在移动设备上查看时，该页面包含一些常见行为。隐藏元素屏幕外的部分并点击屏幕上的推送和显示

我有一个包含文本和链接的元素。文本部分需要覆盖视口宽度的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

隐藏元素屏幕外的部分并点击屏幕上的推送和显示

回答

相关问题