代码之家 › 专栏 › 技术社区 › Larry Osterman

jQuery show()方法将“li”项重置为display:block

jquery

Larry Osterman · 技术社区 · 16 年前

在父“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()”方法完成后更新代码来修复样式),但我想知道我做错了什么。

3 回复 | 直到 16 年前

Miguel Ventura 16 年前

当你这样做的时候 .hide() ,你的 li display:hide 所以 .show() display:block 因为以前 display

去除透露 锂 然后把它们放在盒子里 ul 显示 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');
     })

mark 14 年前

jQuery .show() .hide() 恢复正确的显示属性 的 <li> 元素,但是 仅当不设置动画时

也就是说,只是打电话 .hide() 和 .show() 将恢复到 list-item .

但是打电话 .show(250) 将恢复到 block

Bruno Reis 16 年前

@拉里&@米格尔:

hide() s和 show() <li> s、他们被设置回“列表项”。实际上,如果您查看jQuery的源代码 show() 方法,您将看到:

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

如果你看看 隐藏() 方法,您将看到它实际上保存了值o display

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>

你确定你能确认你所说的问题吗?也许有些重要的事情我没有得到,或者你没有告诉我们。

祝你好运