0
我想在我的网站上复制此演示https://codepen.io/arjancodes/pen/GgMejV但没有发生点击。扩大瓷砖javascript - 不工作/扩大在网站
风格和一切基本上是正确的，但似乎没有发生，当你点击任何标签，他们应该扩大到拉内屏幕内容。我确实将css中的scss转换为css在我的网站上工作，所以我不确定问题是否存在。
<div class="stuff">
<h1>Expanding Tiles</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus architecto aliquid aut harum suscipit similique aspernatur tempora ratione. Velit ad placeat cumque fugit laudantium similique tenetur fuga quisquam, tempora id.
</p>
</div>
<ul class="tiles">
<li class="tiles__tile">
<h2>One</h2>
</li>
<li class="tiles__tile">
<h2>Two</h2>
</li>
<li class="tiles__tile">
<h2>Three</h2>
</li>
<li class="tiles__tile">
<h2>Four</h2>
</li>
</ul>
<ul class="content">
<li class="content__item" id="1">
<div class="content-wrap">
<p style="display:inline-block;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et reprehenderit nostrum nisi aliquam nemo non fugit, minus, ex ullam vel minima libero, eius labore. Veritatis odit blanditiis quidem amet accusantium.</p>
<p style="display:inline-block;">hello more content</p>
<p style="display:inline-block;">and a bit more</p>
<a href="https://www.bbc.co.uk">BUTTON</a>
</div>
</li>
<li class="content__item" id="2">
<div class="content-wrap">
<h3>Bananas</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae impedit aperiam nemo quos fuga illum porro doloribus quisquam quidem reprehenderit, hic tempora, illo id provident aliquam quo officia ea voluptatum.</p>
</div>
</li>
<li class="content__item" id="3">
<div class="content-wrap">
<h3>Cucumbers</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nam nesciunt maiores. Nesciunt explicabo ea deserunt facere sunt, autem, reiciendis nobis, velit accusantium laudantium quis non ratione aspernatur. Eum, doloribus?</p>
</div>
</li>
<li class="content__item" id="4">
<div class="content-wrap">
<h3>Spinach</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi velit iure expedita quis, blanditiis. Consectetur incidunt distinctio dolor ullam beatae cum maiores quas pariatur amet, temporibus ad commodi dolorem provident.</p>
</div>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.tiles {
position: fixed;
z-index: 5;
bottom: 0;
display: flex;
width: 100%;
}
.tiles__tile {
flex: 1;
padding: 20px;
transition: all .25s ease-out;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.tiles__tile.active:nth-child(1) {
background: tomato;
}
.tiles__tile.active:nth-child(2) {
background: deepskyblue;
}
.tiles__tile.active:nth-child(3) {
background: lightseagreen;
}
.tiles__tile.active:nth-child(4) {
background: crimson;
}
.tiles__tile:hover:nth-child(1) {
background: tomato;
}
.tiles__tile:hover:nth-child(2) {
background: deepskyblue;
}
.tiles__tile:hover:nth-child(3) {
background: lightseagreen;
}
.tiles__tile:hover:nth-child(4) {
background: crimson;
}
.content {
z-index: 10;
height: 100vh;
position: fixed;
top: 0;
}
.content__item {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
display: flex;
align-items: center;
padding: 12vw;
transform: scale(0);
transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.content__item.active {
transform: scale(1);
}
.content__item.active .content-wrap {
transform: scale(1);
opacity: 1;
}
.content__item:nth-child(1) {
transform-origin: 0% 100%;
background: tomato;
}
.content__item:nth-child(2) {
transform-origin: 33% 100%;
background: deepskyblue;
}
.content__item:nth-child(3) {
transform-origin: 66% 100%;
background: lightseagreen;
}
.content__item:nth-child(4) {
transform-origin: 100% 100%;
background: crimson;
}
.content__item .content-wrap {
transform: scale(0.7);
opacity: 0;
transition: all 0.8s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* --------------- */
.stuff {
margin: 6vw;
max-width: 768px;
}
h2 {
font-weight: 300;
}
h3 {
font-size: 48px;
}
p {
font-weight: 300;
font-size: 24px;
}
JS
var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');
tileBtn.on('click touchstart', function() {
var self = $(this);
var match = self.attr('data-tile');
var allContent = $('li.content__item');
var content = $('li#' + match);
self.toggleClass('active');
content.toggleClass('active');
contentWrap.css({
'transition-delay': '.35s'
});
return false;
});
$(window).on('click touchstart', function() {
if (allContent.hasClass('active') && tileBtn.hasClass('active')) {
allContent.removeClass('active');
setTimeout(function() {
tileBtn.removeClass('active');
}, 400);
contentWrap.css({
'transition-delay': '.0s'
});
}
})
这两个答案的图片几乎可以肯定。 – Jamiec