javascript - div显示内联隐藏

Question

我定义一个模板如下:

 $.template('aTemplate',
  '<div id="someid" class="abc">' +
   ....
  '</div>'
);

我希望这个 div 与其他元素内联(无论我将它们放在哪里)。 我还希望这个 div 被隐藏(当我将其添加到 DOM 时)，然后在其他操作(用户点击)上变得可见。

因此，为了使其内联和隐藏，我定义了以下 css

.abc {
  display: inline-block;
  visibility: hidden;
}

通过一些行动，我已经

 $('#someid').show()

但似乎不起作用。有什么建议可以纠正吗？

Answer 1

您的问题是 $.show() 将设置 display:inline-block

来自文档:
http://api.jquery.com/show/
匹配的元素将立即显示，没有动画。这大致相当于调用 .css('display', 'block')，只不过 display 属性恢复到最初的状态。如果某个元素的显示值为内联，那么隐藏并显示后，它将再次内联显示。

如果您希望 div 保持其在 DOM 中的位置，请尝试将其不透明度设置为 0 来启动:

.abc {
  display: inline-block;
  opacity: 0;
}

然后调用:

$('#someid').css('opacity','1');