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属性值已经迷路了。所以你有两种选择：

从li移除显示的类，并将它们放入ul或其他能够将display设置为{{{}的容器元素中1}}或
尝试使用block

.show()

我可能会选择第二个。

如果您希望获得类似.css({display:'list-item'})的效果，可以执行类似

的操作

.show("normal")

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

Answer 2

@Larry＆amp; @Miguel：

我刚刚使用hide()和show() s <li> s的简单脚本对其进行了测试，并将它们设置回“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：

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>元素的正确显示属性，但仅在不动画时

即，只需致电.hide()和.show()即可恢复为list-item。

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

jQuery show（）方法重置“li”条目以显示：block

3 个答案: