Geek Answers Handbook

JQuery: show () continues to add display: block

I now have a small problem that has turned into a purulent wound.

I recreated the Google Business Hours to determine which hours the company opens during the week or if they are closed that day. Now, if they are closed, the user can select the checkbox, and the DIV time is hidden. I'm using .show() and .hide() right now

Now let's say that the user closes the first day and decides to "apply everything" to the rest of the week. I scroll and close the remaining 6 days. However, if the user changes the day in the middle of the week, the .show() or .hide() functions will automatically add "display: block" , and this will ruin the loop.

Why does jQuery add this style when it has never been there initially, and is there a clean way to remove it in a loop before applying .show() or .hide() ?

+4
source share
5 answers

Use jQuery addClass () and removeClass () if you are not comfortable with the show () and hide () effects, and add a class to change the visibility, for example.

+4
source

http://api.jquery.com/show/

Selected items will be detected immediately, without animation. This is roughly equivalent to calling .css('display', 'block') , except that the display property is restored whatever it is. If the element has a display value of inline, then it is hidden and displayed, it will once again be displayed in the line.

Do you have an initial set of CSS display properties?

+3
source

Jquery uses "display: none" to hide (). I often use this and show (), but I haven't had a problem yet, but probably because display: block didn't corrupt my formatting.

Here is a quick remedy for your situation.

 $("#mydiv").show().css("display","inline")

Use the div parameter that you want instead of the inline (while the inline will probably work for you, since the block is not.

+2
source

In an element that you have not defined, after it is highlighted, JQUERY will add a display block to the element.

Then you can delete it.

 $("#myrow").show().removeAttr( 'style' )

This includes all dynamic styles, so please pay attention if you are dependent on this.

+2
source

As Cyril Gupta and Jimmy Kane say, use this on a hidden div:

 $("#hiddenDiv").css("display","");

It just clears the “none” of the display, your stylesheet should take over from there.

0
source

More articles:


All Articles