Home > Developer > JavaScript
When I learned about the hide () part of jquery today, I suddenly had an idea that the implementation of the Hide/show part of jquery was to attach a "Display:none" attribute to the target element, so what would happen if I applied it in a layout similar to the following?
Put the layout code up first.
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<script src= "Jquery.js" ></script>6<style type= "Text/css" >7* {8margin:0;9padding:0;Ten } One . Box { A width:300px; - height:150px; -text-Align:center; the border:2px solid; -margin:100px Auto 0Auto; - } - . Box. Content { +width:100%; - height:100px; +line-height:100px; ABackground: #666; at } - . box. Click { - background: #ccc; - width:300px; -padding:15px 0; - } in</style> -<title>jquery</title> to +<body> -<div class= "box" > the<div class= "Content" > Show original Contents </div> *<div class= "click" > $<input id= "Change" type= "button" value= "Changing text content"/>Panax Notoginseng<input id= "Hide" type= "button" value= "Hide/Show"/> -</div> the</div> +</body> AThen two buttons are bound on the Click event, the first one to change the text content, the second to hide/show the above Content section.
1<script type= "Text/javascript" >2$(function(){3$ (' #change '). Click (function(){4$ ('. Content '). HTML ("Show changed contents!"). ");5 });6$ (' #hide '). Click (function(){7$ ('. Content ')). Fadetoggle ();8 });9 });Ten</script>The "$ (function () {})" section in the code is "$ (' document ')." Ready (function () {}) "shorthand, this later.
Now click on the event bindings and click on each of the two buttons.
Click the Change Text content button:
It seems to be no problem!
Then click the Show/Hide button:
How did the button strip run up?
viewing through browser debugging
You can see that jquery achieves its effect by attaching "display:none" to the element.
Check the Internet, the role of "Display:none" is that an element is hidden, and does not preserve its physical space for hidden objects, that is, the object disappears completely on the page. This causes the following button block to float upwards. How to solve this problem?
The first thing I think about is to pin the button block to the bottom of the box, so that no matter whether the above element block exists, it will not affect the position of the button block below.
To achieve this effect, you first have to eject the button block from the document flow so that the elements in the document flow cannot affect the position of the element, floating "float" and the absolute positioning "absolute" can achieve the purpose.
However, when using the floating implementation, found that click on the Show/Hide button, because the content block appears suddenly disappear, resulting in the button block of the button element also moved, it is obvious that the content block exists on the position of the floating element is affected, which is obviously a failure.
When absolute positioning is used, it is achieved by calculating its coordinates, but if the layout of the parent block changes slightly, the position of the button block is not changed (absolute positioning is based on body), which obviously destroys the layout of the structure, so the layout is fragile, not the effect we want to achieve.
Obviously it is unrealistic to solve this problem by layout. Let's start with other aspects.
There are two ways to hide elements: Display:none and Visible:hidden.
Both can hide elements, but differ:
Display:none
It does not preserve its physical space for objects that are hidden, that is, the object disappears completely on the page, and in layman's terms it cannot be seen or touched.
Visible:hidden
Makes an object invisible on a Web page, but the space occupied by the object on the page does not change, and in layman's terms it is invisible but can be touched.
So we can find a way! It's OK to change the hidden implementation from "Display:none" to "Visible:hidden".
The JS code is then changed to:
1$(function(){2$ ("#change"). Toggle (function(){3$ (". Content"). HTML ("Show changed contents");4},function(){5$ (". Content"). HTML ("show original");6 });7$ ("#hide"). Toggle (function(){8$ (". Content"). CSS ("visibility", "hidden"));9},function(){Ten$ (". Content"). CSS ("Visibility", "visible"); One }); A});Perfect solution to the problem!
Summarize:
Just like a brain teaser, sometimes a change of mind to think about, in fact, the problem is very simple.
Display:none and Visible:hidden of the "JavaScript" JQ
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
