展开图块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

我认为您的问题是，您在页面的<head>中包含了scripts.js ，并且您没有在执行页面之前等待页面加载。 因此，尝试添加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属性（ 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>