扩展磁贴javascript - 在网站

Question

我尝试在我的网站上复制此演示https://codepen.io/arjancodes/pen/GgMejV，但点击时没有任何反应。

风格和一切基本都是正确的，但是当你点击任何一个标签时似乎没有任何事情发生，它们应该扩展为带有内容的拉屏幕。我确实将codepen中的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'
    });

  }
})

Answer 1

我认为您的问题是您在页面的scripts.js中包含<head>，而您在执行页面之前并未等待页面加载。因此，尝试添加onclick事件的部分找不到任何将onclick事件添加到。

的内容

以下是解决问题的一种方法：

$(function() {
    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'
            });

        }
    });
});

Answer 2

这是因为您缺少.tiles__tile元素（data-tile="1"等）上的数据属性。

工作示例：

＆＃13;

＆＃13;

$(document).ready(function() {
  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'
      });

    }
  });
});

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background: indianred;
  color: white;
  font-family: 'Source Sans Pro';
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" data-tile="1">
    <h2>One</h2>
  </li>
  <li class="tiles__tile" data-tile="2">
    <h2>Two</h2>
  </li>
  <li class="tiles__tile" data-tile="3">
    <h2>Three</h2>
  </li>
  <li class="tiles__tile" data-tile="4">
    <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>

＆＃13;

＆＃13;

＆＃13;