JavaScript Tutorial/jQuery/toggle

Материал из Web эксперт
Перейти к: навигация, поиск

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>