javascript - jQuery 在点击时隐藏多个 div

Question

每当我点击“click hier”时，类“cirkel1”的 div 和类“bewegendetekst”的 div 就会出现。但是当我想点击“点击返回”时，它们不会消失。

我尝试使用切换功能，但这只会让事情变得更糟。

所以我的问题是，当我单击“单击返回”时，如何使类为“cirkel1”的 div 和类为“bewegendetekst”的 div 消失

$(document).ready(function() {
  $(".blok1").click(function() {
    $(".blok2").toggle("slow");
    $(".blok3").toggle("slow");
    $(".blok4").toggle("slow");
  });
  $(".blok1").click(function() {
    if ($(this).width() != 500)
      $(this).animate({
        width: 500
      }, 1000);
    else
      $(this).animate({
        width: 250
      }, 1000);
  });
  $(".blok1").click(function() {
    if ($(this).height() != 500)
      $(this).animate({
        height: 500
      }, 1000);
    else
      $(this).animate({
        height: 250
      }, 1000);
  });
});

$(document).ready(function() {
  $("p").on("click", function() {
    var el = $(this);
    setTimeout(function() {
      if (el.text() == el.data("text-swap")) {
        el.text(el.data("text-original"));
      } else {
        el.data("text-original", el.text());
        el.text(el.data("text-swap"));
      }
    }, 1000);
  });
});


$(document).ready(function() {
  $(".cirkel1").click(function() {
    $(".bewegendetekst").show("slow");
  });
});

$(document).ready(function() {
  $(".witte-tekst").click(function() {
    $(".cirkel1").show("slow");
  });
  $(".cirkel1").click(function(e) {
    e.stopPropagation();
    $(".cirkel1").hide("slow");
  });
});

.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
.witte-tekst {
  color: #fff;
}
.cirkel1 {
  border-radius: 50%;
  background-color: #000;
  height: 125px;
  width: 125px;
  position: absolute;
}
.bewegendetekst {
  color: #fff;
  height: 125px;
  width: 250px;
  background-color: #000;
  padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'>
    <p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
    <div class='cirkel1' style="display:none"></div>
    <p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
  </div>
  <div class='blok2'></div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>

Answer 1

使用 jQuery toggle() 当您单击单击返回 按钮时显示/隐藏 圆圈的方法:

$(".witte-tekst").click(function() {
   $(".cirkel1").toggle("slow");
})

注意:一个现成的函数就足够了。

希望这对您有所帮助。

$(document).ready(function() {
  $(".blok1").click(function() {
    $(".blok2").toggle("slow");
    $(".blok3").toggle("slow");
    $(".blok4").toggle("slow");
  });
  $(".blok1").click(function() {
    if ($(this).width() != 500)
      $(this).animate({
        width: 500
      }, 1000);
    else
      $(this).animate({
        width: 250
      }, 1000);
  });
  $(".blok1").click(function() {
    if ($(this).height() != 500)
      $(this).animate({
        height: 500
      }, 1000);
    else
      $(this).animate({
        height: 250
      }, 1000);
  });

  $("p").on("click", function() {
    var el = $(this);
    setTimeout(function() {
      if (el.text() == el.data("text-swap")) {
        el.text(el.data("text-original"));
      } else {
        el.data("text-original", el.text());
        el.text(el.data("text-swap"));
      }
    }, 1000);
  });


  $(".cirkel1").click(function() {
    $(".bewegendetekst").show("slow");
  });

  $(".witte-tekst").click(function() {
    $(".cirkel1").toggle("slow");
  });
  $(".cirkel1").click(function(e) {
    e.stopPropagation();
    $(".cirkel1").hide("slow");
  });
});

.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
.witte-tekst {
  color: #fff;
}
.cirkel1 {
  border-radius: 50%;
  background-color: #000;
  height: 125px;
  width: 125px;
  position: absolute;
}
.bewegendetekst {
  color: #fff;
  height: 125px;
  width: 250px;
  background-color: #000;
  padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'>
    <p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
    <div class='cirkel1' style="display:none"></div>
    <p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
  </div>
  <div class='blok2'></div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>