关于作品页面只能点击一次

时间：2018-03-01 07:13:03

标签： javascript jquery html css

我对这些代码有些问题。 当我第一次点击其中一个作品时，它可以正常显示。 但是当我第二次点击相同的工作时，它无法工作。 那么我该如何修改这种情况呢？

  • 内部课程＆＃34;容器＆＃34;是展示工作内容的地方。
  • class＆＃34; itemBox＆＃34;是一个按钮可以按来链接工作内容。
  • class＆＃34; work_content＆＃34;是工作内容。
  • 有许多作品要展示，我只展示了一些例子。

＆＃13;
＆＃13; 
$(function() {
    $("#workBox1").load("link/Househappiness.html", function() { closeWork(); });
    $("#workBox2").load("link/EXPEDIA.html", function() { closeWork(); });
    var refElement = [];
    $('.workItem').each(function(index, el) {
        refElement[index] = $(this).attr('id');

        $(".itemBox").each(function(index, el) {
            $(this).on('click', 'a', function(e) {
                var target = $(this).attr('href');
                if (refElement[index] = target) {
                    $('.workItem').removeClass('workOpen');
                    $(refElement[index]).addClass('workOpen');
                }
                $('html, body').scrollTop(0);
                return false;
            });
        });

    });
    function closeWork() {
        $('.close').click(
            function() {
                $(this).parent('.wrapper').parent('.workItem').removeClass('workOpen');
                $(this).parent('.wrapper').parent('.workItem').addClass('workClose');
            });
    }

});
＆＃13; 
html,
body {
  overflow: hidden;
  height: 100%;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.wrap {
  position: relative;
}

.header {
  display: block;
  width: 100%;
  height: 15vh;
  /*165px*/
  background-color: #f4f4f4;
  position: relative;
  z-index: 6;
}

.logo {
  display: block;
  width: 100%;
  max-width: 147px;
  position: absolute;
  left: 46.2%;
  top: 0%;
  opacity: 1;
  -webkit-animation: logo_move 2.5s;
  -o-animation: logo_move 2.5s;
  animation: logo_move 2.5s;
}

/*----- logo_move animation css -----*/

@-webkit-keyframes logo_move {
  0% {
    top: -5%;
    opacity: 0;
  }
  40% {
    top: -5%;
    opacity: 0;
  }
  100% {
    top: -0%;
    opacity: 1;
  }
}

@-o-keyframes logo_move {
  0% {
    top: -5%;
    opacity: 0;
  }
  40% {
    top: -5%;
    opacity: 0;
  }
  100% {
    top: -0%;
    opacity: 1;
  }
}

@-moz-keyframes logo_move {
  0% {
    top: -5%;
    opacity: 0;
  }
  40% {
    top: -5%;
    opacity: 0;
  }
  100% {
    top: -0%;
    opacity: 1;
  }
}

@keyframes logo_move {
  0% {
    top: -5%;
    opacity: 0;
  }
  40% {
    top: -5%;
    opacity: 0;
  }
  100% {
    top: -0%;
    opacity: 1;
  }
}

.menu-toggle {
  display: block;
  width: 40px;
  height: 25px;
  position: absolute;
  top: 32.5%;
  right: 6%;
  /*cursor: pointer;*/
  display: none;
  z-index: 9999;
}

.menu-toggle:before,
.menu-toggle:after {
  content: "";
  /*這個一定要加*/
  display: block;
  width: 100%;
  height: 5px;
  background: #303030;
  border-radius: 10px;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.menu-toggle:before {
  position: absolute;
  top: 0px;
}

.menu-toggle:after {
  position: absolute;
  top: 20px;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 5px;
  background: #303030;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.menu-toggle.on::before {
  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
  /*translate不知道怎判斷*/
  background: #ffffff;
}

.menu-toggle.on span {
  /*opacity: 0;不知道這有甚麼差別*/
  display: none;
}

.menu-toggle.on::after {
  -moz-transform: rotate(-45deg) translate(8px, -7px);
  -ms-transform: rotate(-45deg) translate(8px, -7px);
  -webkit-transform: rotate(-45deg) translate(8px, -7px);
  transform: rotate(-45deg) translate(8px, -7px);
  background: #ffffff;
}

nav {
  list-style: none;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: block;
  padding-top: 9vh;
}

nav ul {
  font-size: 0px;
  -webkit-text-size-adjust: none;
}

nav li {
  display: inline-block;
  width: 19.7%;
  font-size: 17px;
  text-align: center;
  letter-spacing: 1.5px;
  font-family: "Raleway", sans-serif;
}

nav li:nth-child(2) {
  margin-right: 20%;
}

nav li a {
  color: #3a3e43;
  text-decoration: none;
  /*----- hover下面的底線padding -----*/
  padding: 4%;
}

nav li a:hover {
  border-bottom: 1px solid #5e6671;
}
.container {
  display: block;
  position: relative;
  height: 75vh;
  overflow: auto;
}
.row {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 5%;
}

.itemBox {
  width: 32%;
  height: 28vh;
  margin-right: 2%;
  margin-bottom: 2%;
  float: left;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.itemBox img {
  border: solid #dadada 1px;
  max-width: 640px;
}

.itemBox:nth-child(3n) {
  margin-right: 0;
}

/*這是3的倍數的意思*/

.itemBox > div {
  margin-top: 10px;
}

.itemBox a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.itemBox .work_hit {
  display: block;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: #ffffff;
  transition: 0.7s ease;
  opacity: 0;
}

.itemBox .work_hit:hover {
  opacity: 0.5;
}

.work_title {
  text-align: center;
  letter-spacing: 3px;
}

.work_title p {
  font-size: 40px;
  color: #3a3e43;
  font-family: "Source Sans Pro", sans-serif;
  margin-top: 6%;
}

.work_title span {
  display: block;
  color: #303030;
  font-size: 16px;
  font-family: "微軟正黑體", "Arial", sans-serif;
  margin-top: 4%;
}

.workItem {
  display: none;
  transition: 0.5s ease;
}

.workItem.workOpen {
  display: block;
  position: absolute;
  color: #ffffff;
  z-index: 5;
  width: 100%;
  top: 15vh;
  left: 0;
  /*padding: 40px;*/
  height: 75vh;
  overflow-y: scroll;
  animation-name: slide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes slide {
  from {
    opacity: 0;
    top: 100vh;
  }
  to {
    opacity: 1;
    top: 15vh;
  }
}

.workItem.workClose {
  display: block;
  position: absolute;
  color: #ffffff;
  z-index: 5;
  width: 100%;
  top: 15vh;
  left: 0;
  /*padding: 40px;*/
  height: 75vh;
  overflow-y: scroll;
  animation-name: slide_2;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-animation-name: slide_2;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes slide_2 {
  from {
    opacity: 1;
    top: 15vh;
  }
  to {
    opacity: 0;
    top: 100vh;
  }
}

.workItem img {
  width: 100%;
  margin-bottom: 85px;
}

.close {
  font-size: 40px;
  color: #ffffff;
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 15;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="wrap">
    <div class="header">
      <a href="index.html" class="logo"><img src="https://www.ashlieworks.com/test/Tofu/logo_big.png" alt=""></a>
      <a href="#" class="menu-toggle"><span></span></a>
      <nav>
        <ul role="navigation" class="hidden">
          <li><a href="index.html">Home</a></li>
          <li><a href="works.html">Portfolio</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>
    </div>
    <!-- header end -->
    <div class="container">
      <div class="row">
        <ul class="wrapper">
          <li class="itemBox">
            <a href="#work1" class="work_hit"></a>
            <img src="https://www.ashlieworks.com/test/Tofu/ashlie/data/pic/44.png" alt="I house 特力屋 窩的小確幸">
            <div class="work_title">
              <p>I house</p>
              <span>2016 特力屋 窩的小確幸</span>
            </div>
          </li>
          <li class="itemBox">
            <a href="#work2" class="work_hit"></a>
            <img src="https://www.ashlieworks.com/test/Tofu/ashlie/data/pic/43.png" alt="EXPEDIA2015 Summer Campaign">
            <div class="work_title">
              <p>EXPEDIA</p>
              <span>2015 Summer Campaign</span>
            </div>
          </li>

        </ul>
      </div>
      <div class="work_content">
        <div class="workItem" id="work1">
          <div class="wrapper" id="workBox1"></div>
        </div>
        <div class="workItem" id="work2">
          <div class="wrapper" id="workBox2"></div>
        </div>

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

任何帮助？

0 个答案:

没有答案
相关问题
最新问题