There are many cases in Jquery where the hidden HTML elements are constantly displayed, especially when the mouse is over. Causes back-and-forth hiding and showing

<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){ //******** ***** the problem point is here, there is no judgment whether in the animation
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">

The correct way to write it is something like this

<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
if(!$(".panel").is(":animated")){ //Here's the problem, here's the problem of whether or not it's animated
$(".panel").slideToggle("slow");
}
});
});
</script>

Or stop the animation queue before sliding.

<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).stop().slideToggle("slow");//The stop() function stops the animation queue.
});
});
</script>