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 li and put them in the ul or other container element that is able to get display set to block or
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!