JavaScript Tutorial/jQuery/toggle
Содержание
- 1 30. Click to toggle opacity
- 2 30. Click to toggle style
- 3 30. Normal toggle
- 4 30. Slow toggle
- 5 30. Toggle among two or more function calls every other click
- 6 30. Toggle fast
- 7 30. toggle(fn, fn1): when clicking matched element, the first specified function is fired, clicked again, the second is fired.
- 8 30. Toggle in milliseconds
- 9 30. Toggle true and false
- 10 30. Use toggle function to change class
30. Click to toggle opacity
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#my").toggle( function(event) { $(event.target).css("opacity",0.4); }, function(event) { $(event.target).css("opacity",1.0); } ); }); </script> </head> <body> <body>
asdf
</body>
</html></source>
30. Click to toggle style
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("p").click(function () { $("p").toggle(); });
}); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Normal toggle
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").toggle("normal"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Slow toggle
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").toggle("slow"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Toggle among two or more function calls every other click
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").toggle( function () { $(this).css({"color":"blue"}); }, function () { $(this).css({"color":"red"}); }, function () { $(this).css({"color":"yellow"}); } ); }); </script>
</head> <body> <body>
header 1
</body>
</html></source>
30. Toggle fast
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").toggle("fast"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. toggle(fn, fn1): when clicking matched element, the first specified function is fired, clicked again, the second is fired.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").toggle( function () { $(this).css("list-style-type", "disc") .css("color", "blue"); }, function () { $(this).css({"list-style-type":"", "color":""}); } );
}); </script> </head> <body> <body>
- A
- B
- C
- D
</body>
</html></source>
30. Toggle in milliseconds
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").toggle(1000); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Toggle true and false
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var c = 0; $("p").click(function () { $("p").toggle( c++ % 2 == 0 ); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
30. Use toggle function to change class
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").toggle( function () { $(this).addClass("my"); }, function () { $(this).removeClass("my"); } ); }); </script> <style> .my { color:blue; } </style>
</head> <body> <body>
header 1
</body>
</html></source>