javascript - 如何在每个 div 上切换具有不同效果的多个 div

Question

我有多个 div，每个 div 都有自己的位置。我想要的是在单击 div 内的文本时切换每个 div 我是 Javascript 的新手，所以请多多包涵。我知道如何通过像下面那样切换一个 div 来做到这一点。

var para = document.querySelectorAll('.wrap div p');
      for (var i = 0; i < para.length; i++) {
          para[i].addEventListener('click', expand);
      }

      function expand(e) {
       if ((e.target === para[2]) && (document.querySelector('.wrap #three').style.width === '15%')) {
             document.querySelector('.wrap #three').style.width = '100%';
           }else{
             document.querySelector('.wrap #three').style.width = '15%';

           }
       }

我也尝试使用 if else 语句，但它只是扩展了 div，我无法将其缩小回原来的位置。我知道有一种简单的方法可以实现这一点，但我想不通。

var para = document.querySelectorAll('.wrap div p');
for (var i = 0; i < para.length; i++) {
  para[i].addEventListener('click', expand);
}

function expand(e) {
  if (e.target === para[0]) {
    document.querySelector('.wrap #one').style.width = '100%';
  } else if (e.target === para[1]) {
    document.querySelector('.wrap #two').style.width = '100%';

  } else if (e.target === para[2]) {
    document.querySelector('.wrap #three').style.width = '100%';

  } else if (e.target === para[3]) {
    document.querySelector('.wrap #four').style.width = '100%';

  } else if (e.target === para[4]) {
    document.querySelector('.wrap #five').style.width = '100%';

  } else if (e.target === para[5]) {
    document.querySelector('.wrap #six').style.width = '100%';

  } else if (e.target === para[6]) {
    document.querySelector('.wrap #seven').style.width = '100%';

  }
}

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: row;
}

.wrap div {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #fdfdfd;
  transition: 0.2s ease-in;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}

.wrap div:before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  right: -150px;
  top: 27%;
  background: red;
  border-radius: 50%;
  cursor: pointer;
}

.wrap p {
  position: absolute;
  top: 40%;
  cursor: pointer;
  transform: rotate(-90deg);
  font-size: 25px;
  font-weight: bold;
  color: white;
  font-family: 'Halvetica', sans-serif;
}

.wrap #one {
  position: absolute;
  width: 21%;
}

.wrap #one:before {
  background: #FF1D55;
}

.wrap #one p {
  right: -8px;
}

.wrap #two {
  position: absolute;
  width: 18%;
}

.wrap #two:before {
  background: #FFE31A;
}

.wrap #two p {
  right: -23px;
}

.wrap #three {
  position: absolute;
  width: 15%;
}

.wrap #three:before {
  background: #00E2AA;
}

.wrap #three p {
  right: 2px;
}

.wrap #four {
  position: absolute;
  width: 12%;
}

.wrap #four:before {
  background: #B90CB4;
}

.wrap #four p {
  right: -13px;
}

.wrap #five {
  position: absolute;
  width: 9%;
}

.wrap #five:before {
  background: #FF3400;
}

.wrap #five p {
  right: -5px;
}

.wrap #six {
  position: absolute;
  width: 6%;
}

.wrap #six:before {
  background: #30B7E2;
}

.wrap #six p {
  right: -18px;
}

.wrap #seven {
  position: absolute;
  width: 3%;
}

.wrap #seven:before {
  background: #220054;
}

.wrap #seven p {
  right: -12px;
}

<div class="wrap">
  <div id="one">
    <p>About</p>
  </div>
  <div id="two">
    <p>Services</p>
  </div>
  <div id="three">
    <p>Blog</p>
  </div>
  <div id="four">
    <p>Follow</p>
  </div>
  <div id="five">
    <p>Team</p>
  </div>
  <div id="six">
    <p>Contact</p>
  </div>
  <div id="seven">
    <p>History</p>
  </div>
</div>

我希望我能清楚地解释一切。任何帮助将不胜感激

标签： javascripthtmlcsstoggle

Answer 1

使用classList.add/remove而不是通过 javascript 添加内联样式。在您的代码中，您要附加p一个占用很小区域的事件，我添加了一个类p，以便它的背景可以看到并且很容易点击。

此外，您不需要定位每个元素并向其添加类。

在此示例中，获取目标元素及其父元素和toggle类

var para = document.querySelectorAll('.wrap div p');
for (let i = 0; i < para.length; i++) {

  para[i].addEventListener('click', expand);
}

function expand(e) {

  if (e.target.parentNode.classList.contains('fullWidth')) {
    e.target.parentNode.classList.remove('fullWidth')
  } else {
    e.target.parentNode.classList.add('fullWidth')
  }

}

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: row;
}

.wrap div {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #fdfdfd;
  transition: 0.2s ease-in;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}

.wrap div:before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  right: -150px;
  top: 27%;
  background: red;
  border-radius: 50%;
  cursor: pointer;
}

.wrap p {
  position: absolute;
  top: 40%;
  cursor: pointer;
  transform: rotate(-90deg);
  font-size: 25px;
  font-weight: bold;
  color: white;
  font-family: 'Halvetica', sans-serif;
}

.wrap #one {
  position: absolute;
  width: 21%;
}

.wrap #one:before {
  background: #FF1D55;
}

.wrap #one p {
  right: -8px;
}

.wrap #two {
  position: absolute;
  width: 18%;
}

.wrap #two:before {
  background: #FFE31A;
}

.wrap #two p {
  right: -23px;
}

.wrap #three {
  position: absolute;
  width: 15%;
}

.wrap #three:before {
  background: #00E2AA;
}

.wrap #three p {
  right: 2px;
}

.wrap #four {
  position: absolute;
  width: 12%;
}

.wrap #four:before {
  background: #B90CB4;
}

.wrap #four p {
  right: -13px;
}

.wrap #five {
  position: absolute;
  width: 9%;
}

.wrap #five:before {
  background: #FF3400;
}

.wrap #five p {
  right: -5px;
}

.wrap #six {
  position: absolute;
  width: 6%;
}

.wrap #six:before {
  background: #30B7E2;
}

.wrap #six p {
  right: -18px;
}

.wrap #seven {
  position: absolute;
  width: 3%;
}

.wrap #seven:before {
  background: #220054;
}

.wrap #seven p {
  right: -12px;
}

p {
  background: greenyellow
}

.fullWidth {
  width: 100% !important;
}

<div class="wrap">
  <div id="one">
    <p>About</p>
  </div>
  <div id="two">
    <p>Services</p>
  </div>
  <div id="three">
    <p>Blog</p>
  </div>
  <div id="four">
    <p>Follow</p>
  </div>
  <div id="five">
    <p>Team</p>
  </div>
  <div id="six">
    <p>Contact</p>
  </div>
  <div id="seven">
    <p>History</p>
  </div>
</div>