Question

我有这个：

ERROR:  role "stack_advice" does not exist

function myFunction(x) {
  x.classList.toggle('change');
}

body,
hmtl {
  background- color: black;
}

.text {
  color: Black;
}

a {
  text-decoration: none;
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 90px;
  background-color: blue;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
  height: 100px;
  position: relative;
  top: -100px;
  width: 200px;
  background- color: blue;
  border-radius: 100px;
}

.change .bar2 {
  transform: rotate(3000deg);
  width: 100px;
  height: 200px;
  position: relative;
  left: 200px;
  background-color: blue;
  top: -100px;
  border- radius: 100px;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: blue;
  width: 200px;
  height: 200px;
  position: relative;
  left: 100px;
  bottom: 200px;
  opacity: 1! important;
  border-radius: 100px;
}

.change .text {
  color: black;
  font-size: 10px;
  position: relative;
  top: -200px;
  background-color: green;
  display: block;
}

我希望能够仅切换第一个元素<a id="mobile-nav" href="#"> <div class="container" onclick="myFunction(this)"> <div class="bar1"> <p class="details"></p> </div> <div class="bar2"></div> <div class="bar3"></div> <div class="text">Hello</div> </div> </a>并使其他两个元素以指定的方式做出反应。我不希望用户能够切换底部两个元素.bar1 .bar2，但是我仍然希望它们在按下.bar3时做出反应。

我尝试移动.bar1属性，但这没有用，因为我可以切换a，但是.bar1和.bar2没有反应。它们在容器中，所以我需要单独的容器，如果需要，如何链接它们？目前，您一次只能切换所有三个。

Answer 1

您可以将事件侦听器附加到容器，但只有在event.target是所需的元素时才匹配。
当然，还有其他方法可以通过存储变量和以不同方式附加事件侦听器来实现此目的，而这完全取决于您要实现的目标。

在示例中使用onclick：

function myFunction(this1, x) {
  if(x.target.matches('.bar1'))
    this1.classList.toggle('change');
}

body,
hmtl {
  background- color: black;
}

.text {
  color: Black;
}

a {
  text-decoration: none;
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 90px;
  background-color: blue;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
  height: 100px;
  position: relative;
  top: -100px;
  width: 200px;
  background- color: blue;
  border-radius: 100px;
}

.change .bar2 {
  transform: rotate(3000deg);
  width: 100px;
  height: 200px;
  position: relative;
  left: 200px;
  background-color: blue;
  top: -100px;
  border- radius: 100px;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: blue;
  width: 200px;
  height: 200px;
  position: relative;
  left: 100px;
  bottom: 200px;
  opacity: 1! important;
  border-radius: 100px;
}

.change .text {
  color: black;
  font-size: 10px;
  position: relative;
  top: -200px;
  background-color: green;
  display: block;
}

<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this,event)">
    <div class="bar1">
      <p class="details"></p>
    </div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="text">Hello</div>
  </div>
</a>

使用addEventListener

function myFunction(x) {
  if(x.target.matches('.bar1'))
    this.classList.toggle('change');
}

document.querySelector('.container').addEventListener('click',myFunction);

body,
hmtl {
  background- color: black;
}

.text {
  color: Black;
}

a {
  text-decoration: none;
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 90px;
  background-color: blue;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
  height: 100px;
  position: relative;
  top: -100px;
  width: 200px;
  background- color: blue;
  border-radius: 100px;
}

.change .bar2 {
  transform: rotate(3000deg);
  width: 100px;
  height: 200px;
  position: relative;
  left: 200px;
  background-color: blue;
  top: -100px;
  border- radius: 100px;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: blue;
  width: 200px;
  height: 200px;
  position: relative;
  left: 100px;
  bottom: 200px;
  opacity: 1! important;
  border-radius: 100px;
}

.change .text {
  color: black;
  font-size: 10px;
  position: relative;
  top: -200px;
  background-color: green;
  display: block;
}

<a id="mobile-nav" href="#">
  <div class="container">
    <div class="bar1">
      <p class="details"></p>
    </div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="text">Hello</div>
  </div>
</a>

如何切换单个元素并使其他元素做出反应

1 个答案: