Accordion effect and slide bar

I think it is interesting to write this game this week.

1. Accordion: Click the first-level menu, and the second-level menu is displayed dynamically. Click the first-level menu again to scale back the second-level menu;

The implementation method is as follows:

First, use CSS and HTML to plan nine boxes, of which 1st, 4, and 7 are relatively large and serve as our first-level meal orders. Other small-sized orders are used for secondary meals.

Next, embed a tag a in each level-1 menu and modify the tag to reference a function that can achieve the effect.

 

The following is my function. It is a bit tricky, but it works.

VaR clickno = 1; // It indicates the variable. Why? When it is marked as-1, it indicates that the first click is scaled down or expanded. It is automatically multiplied by-1 after each click.
Function shorter (){
If (clickno> 0) {// Contraction Function
VaR makeshort = setinterval (function (){
VaR temphigh = parseint ($ ('cp'). offsetheight );
$ ('Cp'). style. Height = temphigh-2 + 'px ';
$ ('Pc'). style. Height = temphigh-2 + 'px ';
$ ('Males'). style. Height = temphigh-2 + 'pxy ';
$ ('Femaleb '). style. Height = temphigh-2 + 'px ';
$ ('Day'). style. Height = temphigh-2 + 'px ';
$ ('Mant'). style. Height = temphigh-2 + 'px ';
If (temphigh = 0 ){
Clickno * =-1; // when the level-2 menu is reduced to the hour and the variable is marked as negative, the expanded function is executed next time because the level-1 menu is clicked.
Clearinterval (makeshort); // it is impossible to contract forever, so the Contraction ends when the level-2 menu height is 0.
}
}, 25)
}

If (clickno <0) {// expand the Function
VaR makelong = setinterval (function (){
VaR temphigh2 = parseint ($ ('cp'). offsetheight );
$ ('Cp'). style. Height = temphigh2 + 2 + 'px ';
$ ('Pc'). style. Height = temphigh2 + 2 + 'px ';
$ ('Males'). style. Height = temphigh2 + 2 + 'pxy ';
$ ('Femaleb '). style. Height = temphigh2 + 2 + 'px ';
$ ('Day'). style. Height = temphigh2 + 2 + 'px ';
$ ('Mant'). style. Height = temphigh2 + 2 + 'px ';
If (temphigh2 = 30 ){
Clickno * =-1; // when the second-level menu expands to the maximum, the variable marked as positive. When the second-level menu is clicked, the scale-out function is executed because it is + 1.
Clearinterval (makelong); // It cannot be expanded forever, so the expansion ends when the level-2 menu height is 0.

}, 25)
}

}

Once again, it's a bit tricky, but it has an effect, haha!

2. Slide effect: over time, the color in the box will rise like water until it is filled with a complete outer box, and a small label will follow;

First, use HTML and CSS to draw the above results. What? Do not draw triangles. Set and do not have a high width, the thick border, three sides transparent div is complete.

Second, add the JS function to the button a tag again ,;

The following is my code:

VaR marker = 1; // indicates whether the variable is paused or resumed.
$ ('Movetids'). style. marginleft = 0;
Function timing () {// use the marginleft attribute to increase the padding width over time.
VaR moveab = setinterval (function (){
VaR tempwidth = parseint ($ ('fill'). offsetwidth );
$ ('Fill'). style. width = tempwidth + 1 + 'px ';
$ ('Movetids'). style. marginleft = parseint ($ ('movetids'). style. marginleft) + 1 + 'px'; // small labels follow
VaR showtimes = parseint (1-(parseint ($ ('movetids'). style. marginleft)/600) * 60); // fill the bar
$ ('Time'). innerhtml = '<p>' + showtimes + '& nbsp; S </P>'; // display the remaining time in the small tag.
// Console. Log ($ ('movetids'). style. width)
If (tempwidth> = 600 | marker = 1) {// small organ: When the filling bar is full or when the variable is marked as 1, rest
Clearinterval (moveab) // when the filling bar is full, it is time to rest.
}
}, 100)
}

Function go () {// function embedded in button a tag
Marker * =-1; // What is the whole task? I take the reverse button once, continue with the negative one, and rest with the positive one;
Timing ()
}

What I have in common with these two effects is that they both put a tag variable to determine whether to stop or go. The Code body is extremely rough, but the basic logic is not rough.