Bug Tracker

Ticket #5274: toggleTest.html

File toggleTest.html, 1.5 KB (added by mrspeaker, 12 years ago)

Example of toggle issue

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3        <head>
4                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5                <title>Toggle Test</title>
6                <style type="text/css">
7                        .two1 { border:2px solid yellow; }
8                        .two2 { border:2px solid green; }
9                       
10                        .one1 { background-color: white; }
11                        .one2 { background-color: gray; }
12                        .one3 { background-color: black; }
13                </style>
14        </head>
15        <body>
16                <div id="btnClose" class="icon">Click me</div>
17                <p>
18                        Clicking on the text above should toggle the border between two states (green/yellow border) and toggle the background between three states (white/gray/black).
19                        With jQuery 1.3.2 and nightly build it does not function correctly. With patch it works as expected.
20                </p>
21               
22                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
23                <script type="text/javascript">
24                        $( document ).ready( function(){
25                                $(".icon").toggle( 
26                                        function(){ $(this).removeClass('two2').addClass('two1') }, 
27                                        function(){ $(this).removeClass('two1').addClass('two2') }
28                                );
29
30                                $("#btnClose").toggle(
31                                        function(){     $(this).removeClass('one2 one3').addClass('one1'); }, 
32                                        function(){     $(this).removeClass('one1 one3').addClass('one2'); },
33                                        function(){ $(this).removeClass('one1 one2').addClass('one3'); }
34                                );
35
36                        });
37                </script>               
38        </body>
39</head>