jQuery show()方法重置"li"条目以显示:block

Question

我有一个相对简单的页面,有一些LI条目,我希望能够在点击时显示.我们的想法是模拟PowerPoints逻辑,当您单击页面时,会出现元素组.

在父"div"元素的"click()"处理程序中,我有:

$(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;
    }
});

这个HTML的作用是:

    <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>

不幸的是,当show()命令完成执行时,"li"条目的样式为"display:block"而不是"display:list-item"样式(用firebug和IE验证).我知道我可以轻而易举地解决这个问题(在"show()"方法完成后通过更新代码来修复样式),但我想知道我做错了什么.

Answer 1

当您这样做时.hide()，您的li元素会得到display:hide，因此.show()将它们设置为 ，display:block因为先前的display属性值已丢失。所以你有两种选择：

• 从 中删除类似 Revealed的类li并将它们放入ul或其他能够display设置为block或的容器元素中
• 而不是.show()，尝试使用类似.css({display:'list-item'})

我可能会选择第二个。

如果你想达到类似.show("normal")的效果，你可以做类似的事情

// 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');
     })

我希望上面的代码片段足以让您知道该怎么做。