当我发布消息时，如何使用jQuery显示消息<ul>元素？</ul>

Question

我有以下HTML：

<ul class="message" 
    style="border-width: 1px 0 0 0;
           border-top-left-radius: 0;
           border-top-right-radius: 0;">
</ul>

此代码设置$ message：

oLink.$message = oLink.$modal.find('.message');

我有以下javascript添加消息：

obj.$message.html("<li>Contacting Server, please wait ...</li>");

这样可行，但问题是，当没有消息时，我的ul仍然使用一些属性来设置高度，并使其显示为屏幕底部的区域。是否有某种方法可以使消息不可见，然后让它显示出来。我不是很擅长jQuery，但是当我创建新消息时，我可以在节目中链接或隐藏吗？

Answer 1

仅使用css（和现代浏览器），您可以使用ul伪类设置空:empty的样式

ul:empty {
   display: none;
}

示例小提琴：http://jsbin.com/ipeciw/1/edit

或者只是通过jQuery以编程方式删除/隐藏空ul

$('ul:empty').remove(); // or hide() if you need it later

Answer 2

这都与css有关。你说的高度可能是默认的边距或填充。

你最初可以隐藏它

ul.message { display:none; }

然后当您编写html时，将其显示为。

obj.$message..show().html("<li>Contacting Server, please wait ...</li>");

Answer 3

有jQuery show和hide方法。如果消息没有改变，你只需将其插入ul，然后显示/隐藏它：

$('.message').show();
$('.message').hide();

有关详情，请参阅： http://api.jquery.com/show/ http://api.jquery.com/hide/