汉堡图标切换不起作用

时间：2017-05-10 08:34:38

标签： javascript jquery html css

我的网站顶部有一个汉堡图标，但切换不起作用。我有一个更改-1类，当单击该图标但是没有发生时切换。控制台也没有显示任何错误。请告诉我们此代码中可能存在的问题。

<picture>
function Main() {}
Main.prototype = {
  initPreloading: function() {
    window.addEventListener("load", function() {
      document.body.classList = "loaded";
    });
    document.querySelector(".block.hero").addEventListener("click", this.particleRibbons());
  },
  particleRibbons: function() {
    var c = document.getElementById("canvas__particles"),
      x = c.getContext("2d"),
      w = window.innerWidth,
      h = window.innerHeight,
      f = 180,
      q = [{}, {}],
      m = Math,
      r = 0,
      u = m.PI * 2,
      v = m.cos,
      z = m.random;
    c.width = w;
    c.height = h;
    x.globalAlpha = 0.7;

    function i() {
      w = window.innerWidth;
      h = window.innerHeight;
      x.clearRect(0, 0, w, h);
      q = [{
        x: 0,
        y: h * 1 + f
      }, {
        x: 0,
        y: h * 1 - f
      }]
      while (q[1].x < w + f) d(q[0], q[1])
    }

    function d(i, j) {
      x.beginPath()
      x.moveTo(i.x, i.y)
      x.lineTo(j.x, j.y)
      var k = j.x + (z() * 2 - 0.25) * f,
        n = y(j.y)
      x.lineTo(k, n)
      x.closePath()
      r -= u / -100
      x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
      x.fill()
      q[0] = q[1]
      q[1] = {
        x: k,
        y: n
      }
    }

    function y(p) {
      var t = p + (z() * 2 - 1.1) * f
      return (t > h || t < 0) ? y(p) : t
    }
    i();
    return i;
  },
  initMisc: function() {
    window.addEventListener("resize", this.particleRibbons);
  },
  navIcon: function() {
    $(".hamburger-icon").on("click", function() {
      $(".one").toggleClass("change-1");
    });
  },
  init: function() {
    Main.initPreloading(), Main.particleRibbons(), Main.initMisc(), Main.navIcon();
  }
};
var Main = new Main;
Main.init();


// burger animation

//$(".hamburger-icon").on("click", function(){
//    $(".one").toggleClass("change-1");
//})
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'PT Sans', sans-serif;
  background-color: #212121;
}

body.loaded {
  overflow-x: hidden;
}

.text-align-center {
  text-align: center
}

.vertical-align-helper {
  height: 100vh;
}

.vertical-align-helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px;
}

.vertical-align-helper>[class*=vertical-align-] {
  display: inline-block;
  width: 100%
}

.vertical-align-middle {
  vertical-align: middle;
}

.site-wrapper {
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden
}

.block {
  position: relative
}

.block.hero {
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 300;
  overflow: hidden
}

.block.hero .block__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  cursor: default;
}

.loaded .block.hero {
  position: relative
}

.loaded .block.hero .preloader {
  bottom: -200px
}

.loaded .block.hero .main-nav {
  bottom: 0
}

.block {
  min-height: 100vh;
}

.block.hero {
  background: #212121;
  color: #fff;
  height: 100vh;
}

.block.hero .name {
  font-family: 'Expletus Sans', cursive;
  font-size: 8vw;
  font-weight: 100;
  margin: 0;
  line-height: 0.8em;
}

.block.hero .name span {
  font-weight: 600;
}

.block.hero .subtitle {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 100;
  margin-top: 26px;
}

.hamburger-icon {
  margin: 0;
  padding: 18px;
  height: 57px;
  width: 66px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(50, 50, 50, 0.5);
}

.hamburger-icon .burger {
  margin-bottom: 5px;
  background-color: #ffffee;
  height: 2px;
  width: 30px;
  border-radius: 3px;
}

.hamburger-icon .burger:last-child {
  margin-bottom: 0;
}

.change-1 {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .block.hero .name {
    font-size: 12vw;
  }
  .block.hero .subtitle {
    font-size: 5.5vw;
    font-weight: 500;
  }
}

1 个答案:

答案 0 :(得分：1)

尝试为您的汉堡包制作position: relative;并更改z-index属性

＆＃13;
＆＃13; 
function Main() {}
Main.prototype = {
  initPreloading: function() {
    window.addEventListener("load", function() {
      document.body.classList = "loaded";
    });
    document.querySelector(".block.hero").addEventListener("click", this.particleRibbons());
  },
  particleRibbons: function() {
    var c = document.getElementById("canvas__particles"),
      x = c.getContext("2d"),
      w = window.innerWidth,
      h = window.innerHeight,
      f = 180,
      q = [{}, {}],
      m = Math,
      r = 0,
      u = m.PI * 2,
      v = m.cos,
      z = m.random;
    c.width = w;
    c.height = h;
    x.globalAlpha = 0.7;

    function i() {
      w = window.innerWidth;
      h = window.innerHeight;
      x.clearRect(0, 0, w, h);
      q = [{
        x: 0,
        y: h * 1 + f
      }, {
        x: 0,
        y: h * 1 - f
      }]
      while (q[1].x < w + f) d(q[0], q[1])
    }

    function d(i, j) {
      x.beginPath()
      x.moveTo(i.x, i.y)
      x.lineTo(j.x, j.y)
      var k = j.x + (z() * 2 - 0.25) * f,
        n = y(j.y)
      x.lineTo(k, n)
      x.closePath()
      r -= u / -100
      x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
      x.fill()
      q[0] = q[1]
      q[1] = {
        x: k,
        y: n
      }
    }

    function y(p) {
      var t = p + (z() * 2 - 1.1) * f
      return (t > h || t < 0) ? y(p) : t
    }
    i();
    return i;
  },
  initMisc: function() {
    window.addEventListener("resize", this.particleRibbons);
  },
  navIcon: function() {
    $(".hamburger-icon").on("click", function() {
      $(".one").toggleClass("change-1");
    });
  },
  init: function() {
    Main.initPreloading(), Main.particleRibbons(), Main.initMisc(), Main.navIcon();
  }
};
var Main = new Main;
Main.init();


// burger animation

//$(".hamburger-icon").on("click", function(){
//    $(".one").toggleClass("change-1");
//})
＆＃13; 
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'PT Sans', sans-serif;
  background-color: #212121;
}

body.loaded {
  overflow-x: hidden;
}

.text-align-center {
  text-align: center
}

.vertical-align-helper {
  height: 100vh;
}

.vertical-align-helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px;
}

.vertical-align-helper>[class*=vertical-align-] {
  display: inline-block;
  width: 100%
}

.vertical-align-middle {
  vertical-align: middle;
}

.site-wrapper {
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden
}

.block {
  position: relative
}

.block.hero {
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 300;
  overflow: hidden
}

.block.hero .block__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  cursor: default;
}

.loaded .block.hero {
  position: relative
}

.loaded .block.hero .preloader {
  bottom: -200px
}

.loaded .block.hero .main-nav {
  bottom: 0
}

.block {
  min-height: 100vh;
}

.block.hero {
  background: #212121;
  color: #fff;
  height: 100vh;
}

.block.hero .name {
  font-family: 'Expletus Sans', cursive;
  font-size: 8vw;
  font-weight: 100;
  margin: 0;
  line-height: 0.8em;
}

.block.hero .name span {
  font-weight: 600;
}

.block.hero .subtitle {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 100;
  margin-top: 26px;
}

.hamburger-icon {
  margin: 0;
  padding: 18px;
  height: 57px;
  width: 66px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(50, 50, 50, 0.5);
  position: relative;
  z-index: 1;
}

.hamburger-icon .burger {
  margin-bottom: 5px;
  background-color: #ffffee;
  height: 2px;
  width: 30px;
  border-radius: 3px;
}

.hamburger-icon .burger:last-child {
  margin-bottom: 0;
}

.change-1 {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .block.hero .name {
    font-size: 12vw;
  }
  .block.hero .subtitle {
    font-size: 5.5vw;
    font-weight: 500;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="loading">
  <div class="site-wrapper">
    <div class="site-main fullpage">
      <section data-id="hero" class="block hero" style="margin-top:0;padding:0">
        <div class="hamburger-icon">
          <div class="burger one"></div>
          <div class="burger tikki"></div>
          <div class="burger two" style="margin-bottom: 0;"></div>
        </div>
        <canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
        <div class="block__content vertical-align-helper text-align-center">
          <div class="vertical-align-middle">
            <h1 class="name">Chirag <span>Bhansali</span></h1>
            <h3 class="subtitle">Front-End Web Developer</h3>

          </div>
        </div>
      </section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题