Question

我正在构建一个响应式页面，当在移动设备上查看时，它包含一些流行的行为。

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

我怎么能让block-one跨越屏幕的整个宽度，block-two隐藏在屏幕上，然后点击，animate（边缘？）block-two进入视图，block-one被推向左边？

如果我在网站上错过了一个明确的例子，我很抱歉，其他大多数问题都比较复杂。

我不想构建一个jquery移动页面，尽管推送和显示面板将完成此操作。我也使用Angular，如果nganimate比javascript更受欢迎。

Answer 1

这是纯粹的css解决方案：http://jsfiddle.net/3wcfggmf/

我使用了label和checkbox:checked的技巧来识别是否点击了元素。

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

如果我没有正确理解你，请告诉我，我会为你修改这个PURE css解决方案：）

Answer 2

我在这里用一个有效的例子来表达你的小提琴：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值来达到你想要的效果。

Answer 3

您可以通过 CSS转换和 JavaScript类切换来实现此目的。

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

在我的演示中，单击#block-one切换一个触发CSS转换的类。我在演示中包含了一个纯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');
});

在屏幕外隐藏元素部分并推送＆amp;点击显示

3 个答案: