How to use toggle in jquery

How to use toggle in jquery: 1. Bind two or more functions in the click event of the element, and oggle itself is triggered by click; 2. Realize the display and hiding effects of switching elements .

The operating environment of this tutorial: windows7 system, jquery3.2.1 version. This method is suitable for all brands of computers.

Recommended: jquery video tutorial

How to use toggle in jquery:

1. In the click event of the element Bind two or more functions in toggle. Unlike bind, toggle needs to add "click" at the end to bind the click trigger event. toggle itself is click triggered (and can only be triggered by click), as shown in the following example:

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>
<script type="text/javascript">
    $(function () {
        $("#btntest")
            $("#btntest").toggle(
            function(){
                $("div").html("我变了！");
            },
            function(){
                $("div").html("我又变了！");
            });
        });
</script>

2. Switching the display and hiding effects of elements:

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

Related learning recommendations: js video tutorial

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