javascript - 扩展图 block 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

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

工作示例:

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

    }
  });
});

*,
*: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;
}

<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>