.toggle() | Hàm jQuery | Tham khảo jQuery

Định nghĩa và sử dụng

.toggle(): Hiển thị và ẩn các thành phần phù hợp.
Việc hiển thị và ẩn được luân phiên nhau giữa các lần action (VD action Click).

Cấu trúc

Đã được thêm vào từ phiên bản 1.0

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').toggle(300);

$('p').toggle(fast);

.toggle(Độ bền,function(){...})

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').toggle(300,function(){
    $('span').fadeIn(100);
});

.toggle(function(){...},function(){...},...)

Cách sử dụng này không nên sử dụng trong phiên bản 1.8, bị loại bỏ trong phiên bản 1.9

Đã được thêm vào từ phiên bản 1.4.3

.toggle(Độ bền,'easing')

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

Easing có thể sử dụng swing hoặc linear

$('p').toggle(300,'swing');

.toggle(Độ bền,'easing',function(){...})

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

Easing có thể sử dụng swing hoặc linear

$('p').toggle(300,'swing',function(){
    $('span').fadeIn(100);
});

Đã được thêm vào từ phiên bản 1.3

.toggle(showOrHide)

showOrHide: giá trị true nếu thành phần hiển thị, giá trị false nếu thành phần không hiển thị.

$('p').toggle(showOrHide);

.toggle(Độ bền)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    display: none;
    height: 100px;
    width: 150px;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.test03').toggle(2000);
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="test03">toggle(2000)</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p><button>Click</button></p> <div class="test03">toggle(2000)</div>	<p><button>Click</button></p> <div class="test03" style="display: block;">toggle(2000)</div>

.toggle(Độ bền,function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    display: none;
    height: 100px;
    width: 150px;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('div').toggle(2000,function(){
            $(this).css('background-color','red');
        });
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div>Thành phần div</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p><button>Click</button></p> <div>Thành phần div</div>	<p><button>Click</button></p> <div style="display: block; background-color: red;">Thành phần div</div>

.toggle(function(){...}, function(){...},...)

Cách sử dụng này không nên sử dụng trong phiên bản 1.8, bị loại bỏ trong phiên bản 1.9

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p {
    clear: both;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $("div").toggle(
            function(){
                $(this).css("color","red");
            },
            function () {
                $(this).css("color","#000"});
            }
        );
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="swing">toggle swing</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p><button>Click</button></p> <div>Thành phần div</div>	<p><button>Click</button></p> <div style="display: block; background-color: red;">Thành phần div</div>

.toggle(Độ bền,'easing')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
.visible {
    background-color: red;
    display: block!important;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.swing').toggle(2000,'swing');
        
        $('.linear').toggle(2000,'linear');
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="swing">toggle swing</div>
<div class="linear">toggle linear</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p><button>Click</button></p> <div class="swing">toggle swing</div> <div class="linear">toggle linear</div>	<p><button>Click</button></p> <div class="swing" style="display: block;">Nội dung mới</div> <div class="linear" style="display: block;">Nội dung mới</div>

.toggle(Độ bền,'easing',function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: blue;
    display: none;
    float: left;
    margin-right: 20px;
    height: 100px;
    width: 150px;
}
p {
    clear: both;
}
.visible {
    background-color: red;
    display: block!important;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.swing').toggle(2000,'swing',function(){
            $(this).addClass('visible').text('Nội dung mới');
        });
        
        $('.linear').toggle(2000,'linear',function(){
            $(this).addClass('visible').text('Nội dung mới');
        });
    });
});
</script>
</head>

<body>
<p><button>Click</button></p>
<div class="swing">toggle swing</div>
<div class="linear">toggle linear</div>
</body>
</html>

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p><button>Click</button></p> <div class="swing">toggle swing</div> <div class="linear">toggle linear</div>	<p><button>Click</button></p> <div class="swing" style="display: block; background-color: red;">Nội dung mới</div> <div class="linear" style="display: block; background-color: red;">Nội dung mới</div>

.toggle(showOrHide)

.toggle(showOrHide) tương tự như cách viết sau:

if ( showOrHide == true ) {
    $('#foo').show();
} else if ( showOrHide == false ) {
    $('#foo').hide();
}

.toArray()

.toggleClass()