jQuery在点击

Question

每当我点击＆＃34;点击hier＆＃34;与班级和＃34; cirkel1＆＃34;和班级＃34; bewegendetekst＆＃34;出现。但是，当我想点击＆＃34;点击返回＆＃34;他们不会消失。

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

所以我的问题是如何用课堂制作div＆＃34; cirkel1＆＃34;和班级＃34; bewegendetekst＆＃34;当我点击＆＃34;然后点击返回＆＃34;

时消失

＆＃13;

＆＃13;

$(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");
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

点击show/hide按钮时，使用jQuery toggle() 方法Click Back圈：

$(".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>

Answer 2

hide（）函数用于隐藏

$('#yourdiv').hide();

Answer 3

它会再次隐藏回来点击

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