jQueryでトグルを使用する方法

jquery で toggle を使用する方法: 1. 要素のクリック イベントで 2 つ以上の関数をバインドし、クリックによって oggle 自体がトリガーされます; 2. 要素の切り替えによる表示と非表示の効果を実現します。

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン この方法は、すべてのブランドのコンピューターに適しています。

推奨: jquery ビデオ チュートリアル

jquery でトグルを使用する方法:

1. のクリック イベント内要素 トグルで 2 つ以上の関数をバインドします。バインドとは異なり、トグルはクリック トリガー イベントをバインドするために最後に「クリック」を追加する必要があります。次の例に示すように、トグル自体はクリックでトリガーされます (クリックによってのみトリガーできます)。 :

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

2. 要素の表示と非表示の効果の切り替え:

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

関連学習の推奨事項: js ビデオ チュートリアル

#

以上がjQueryでトグルを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。