jQuery show（）方法将“ li”条目重置为display：block

Question

我有一个相对简单的页面，其中包含几个我希望能够在单击时显示的LI条目。 这个想法是为了模拟PowerPoint逻辑，当您单击页面时，其中的元素组会出现。

在父“ 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属性值已丢失。 因此，您有两种选择：

从li删除类似Revealed的类，并将它们放在ul或其他容器元素中，该元素可以将display设置为block或
尝试使用.css({display:'list-item'})东西代替.show() 。

我可能会选择第二个。

如果要实现类似.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');
     })

我希望以上代码片段足以使您对应该做什么有所了解。

Answer 2

@Larry＆@Miguel：

我刚刚用一个简单的脚本对我的<li>了hide()和show()的脚本测试，并将它们设置回“ list-item”。 实际上，如果您查看jQuery的源代码，则可以在show()方法上看到：

jQuery.fn.extend({
show: function(speed,callback){
/* ... */
var old = jQuery.data(this[i], "olddisplay");
/* ... */
jQuery.data(this[i], "olddisplay", display);

而且，如果您查看hide()方法，您会发现它实际上保存了display值，然后将其设置为none：

var old = jQuery.data(this[i], "olddisplay");
if ( !old && old !== "none" )
    jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));

我使用Firebug进行测试的代码：

<script type="text/javascript">
    $(function() {
        $("li").click(function() {
        $("li").hide();
        $("li").show();})
    });
</script>

<body>
    <ul>
        <li>foo</li>
        <li>foo</li>
    </ul>
</body>

您确定可以确认您正在谈论的问题吗？ 也许有些重要的事情我没有得到，或者您没有告诉我们。

祝好运！

Answer 3

我意识到这已经有几年了，但是今天我遇到了：

jQuery的.show()和.hide() 做恢复的适当的显示属性 <li>元素，但只有当不设置其动画 。

即，仅调用.show() .hide()和.show()将还原到list-item 。

但是调用.show(250)将恢复为block 。

jQuery show（）方法将“ li”条目重置为display：block

问题描述

3 个解决方案

解决方案1
4 已采纳 2009-11-25 00:27:33

解决方案2
1 2009-11-25 00:37:11

解决方案3
1 2011-11-15 10:09:57

jQuery show（）方法将“ li”条目重置为display：block

问题描述

3 个解决方案

解决方案1 4 已采纳 2009-11-25 00:27:33

解决方案2 1 2009-11-25 00:37:11

解决方案3 1 2011-11-15 10:09:57

解决方案1
4 已采纳 2009-11-25 00:27:33

解决方案2
1 2009-11-25 00:37:11

解决方案3
1 2011-11-15 10:09:57