jquery: Detailed explanation of how to use toggle

The following editor will bring you a detailed explanation of the two usages of toggle in jquery (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

1. Bind two or more functions in the element’s click event Unlike bind where you need to add "click" at the end to bind the click trigger event, toggle itself is click triggered (and can only be triggered by click),

The following example:

<input id="btntest" type="button" value="点一下我" />
<p>我是动态显示的</p>

<script type="text/javascript">
  $(function () {
    $("#btntest")
      $("#btntest").toggle(
      function(){
        $("p").html("我变了！");
      },
      function(){
        $("p").html("我又变了！");
      });
    });
</script>

2. Switch the display and hide effects of elements:

<input id="btntest" type="button" value="点一下我" />
<p>我是动态显示的</p>

<script type="text/javascript">
  $(function () {
    $("#btntest").bind("click",function(){
      $("p").toggle(500);//此处的 500 是隐藏显示的延迟时间，默认为0，也可以用"slow","normal"或"fast"
                 //如果里面的值为true（toggle(true)）时只能显示元素，值为false（toggle(false)）时只能隐藏元素。） }) }); </script>

The above is the detailed content of jquery: Detailed explanation of how to use toggle. For more information, please follow other related articles on the PHP Chinese website!