jQuery show() method resets "li" entries to display:block
I have a relatively simple page that has a couple of LI entries that I want to开发者_运维问答 be able to show on click. The idea is to simulate PowerPoints logic where groups of elements appear when you click on the page.
In the "click()" handler for the parent "div" element I have:
$(function() {
var currentReveal;
var currentGroup = 1;
currentReveal = $("[class*=Revealed]").hide().length;
$("div").click(function() {
if (currentReveal != 0) {
var revealedElements = $("[class*=Revealed]").filter("[revealgroup='" +
currentGroup + "']");
$(revealedElements).show("normal");
currentGroup += 1;
currentReveal -= revealedElements.length;
}
});
The HTML that this is acting on is:
<div class="Body">
<ul>
<li>Lorem Ipsus</li>
<ul>
<li class="RevealedList" revealgroup="1" >Lorem Ipsus:</li>
<ul class="Revealed" revealgroup="1">
<li>Lorem Ipsus.</li>
<li>Lorem Ipsus.</li>
</ul>
<li class="RevealedList" revealgroup="1">Lorem Ipsus</li>
</ul>
</div>
Unfortunately when the show() command finishes executing, the "li" entry has a style of "display:block" and not a style of "display:list-item" (verified with firebug and IE). I know I can trivially work around this problem (by updating the code to fix the style after the "show()" method has completed), but I'd like to know what I'm doing wrong.
When you do .hide(), your li elements get display:hide, so .show() sets them to display:block because the previous display property value has been lost. So you have two alternatives:
- Remove Revealed-like classes from the
liand put them in theulor other container element that is able to getdisplayset toblockor - Instead of
.show(), try using something like.css({display:'list-item'})
I'd probably go with the second one.
If you want to achieve a .show("normal")-like effect, you can do something like
// assume the following var
var yourstuff = $(/* the stuff you're hiding */);
// instead of just calling .hide(), store width and height first
yourstuff.each(function() {
$(this).data('orig_w',$(this).width())
.data('orig_h',$(this).height())
}).hide()
// then, instead of resetting 'display', animate the stuff
yourstuff.css({display:'list-item', overflow: 'hidden', width:0, height: 0;})
.animate({width: yourstuff.data('orig_w'), height: yourstuff.data('orig_h')},
"normal", //speed
"linear", //easing
function() { // in the end, reset 'overflow' to show the bullet
yourstuff.css('overflow', 'none');
})
I hope the above snippet to be enough to give you an idea of what to do.
I realize this a few years old, but I encountered this today:
jQuery .show() and .hide() do restore the proper display-property of the <li> element, but only when not animating it.
I.e., just calling .hide() and .show() will restore to list-item.
But calling .show(250) will restore to block.
@Larry & @Miguel:
I've just tested this with a simple script that hide()s and show()s my <li>s, and they were set back to "list-item". Actually, if you look at jQuery's source code, on the show() method, you will see:
jQuery.fn.extend({
show: function(speed,callback){
/* ... */
var old = jQuery.data(this[i], "olddisplay");
/* ... */
jQuery.data(this[i], "olddisplay", display);
And if you look at the hide() method, you will that it actually saves the value o display before setting it to none:
var old = jQuery.data(this[i], "olddisplay");
if ( !old && old !== "none" )
jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));
The code I used to test it with Firebug:
<script type="text/javascript">
$(function() {
$("li").click(function() {
$("li").hide();
$("li").show();})
});
</script>
<body>
<ul>
<li>foo</li>
<li>foo</li>
</ul>
</body>
Are you sure you can confirm the problem you are talking about? Maybe there's something important I didn't get, or that you didn't tell us.
Good luck!
加载中,请稍侯......
精彩评论