为了账号安全,请及时绑定邮箱和手机立即绑定

在 jQuery 中多次单击显示/隐藏函数

在 jQuery 中多次单击显示/隐藏函数

GCT1015 2022-09-23 09:58:04

我做了这样:
代码笔或代码下来

$(document).ready(function () {

  var btn1Status = 0;

  $("button").click(function () {

    if (btn1Status === 0) {

      $(".info").slideDown();

      $(".info").show("slow");

      $("button").text("less");

      btn1Status = 1;

    } else {

      $(".info").slideUp();

      $(".nfo").hide("slow");

      btn1Status = 0;

      $("button").text("More");

    }


  });

  });

button {

  background-color: black;

  color: white;

  width: 50px;

  height: 30px;

}

button:focus {

  outline: none;

}

ul {

  list-style-type: none;

  margin: 10px;

  padding: 0;

}


.info {

  background-color: black;

  color: white;

  font-family: arial;

  width: 400px;

  display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<div><img src="https://img.favpng.com/22/6/0/portable-network-graphics-movie-camera-film-clip-art-computer-icons-png-favpng-qfZ7hHPN2CCxiK8sYfjS2Sti9.jpg" width="400"><button>More</button></div>


<div class="info">

  <ul>

    <li>Name: movie1</li>

    <li>Time: 6:00PM</li>

    <li>Info 3 : blablabla</li>

    <li>Info 4 : blablabla</li>               

    </ul>

</div>

当有人单击该按钮时,应显示信息 div。问题是,如果我多次单击该按钮,然后将其抬起,它将继续显示和消失。如何解决此问题。感谢您的帮助。


查看完整描述

1 回答

?
拉风的咖菲猫

TA贡献1661条经验 获得超2个赞

如果您希望能够让用户多次单击但不构建动画队列,则可以使用jQuery中的stop函数来停止/清除任何当前正在运行的动画的队列。


if (btn1Status === 0) {

  $(".info").stop(true, true).slideDown();

  $(".info").show("slow");

  $("button").text("less");

  btn1Status = 1;

} else {

  $(".info").stop(true, true).slideUp();

  $(".info").hide("slow");

  btn1Status = 0;

  $("button").text("More");

}

如果多次单击按钮,这将取消动画队列。的两个参数是: 。clearQueue 需要清除当前动画队列,jumpToEnd 将在跳到下一个动画之前取消当前正在运行的动画,或者从当前动画帧开始运行下一个幻灯片动画。.stop()( [clearQueue ] [, jumpToEnd ] )


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信