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 属性恢复到最初的样子。如果一个元素的显示值为 inline，然后被隐藏并显示，它将再次被显示为 inline。

如果您希望 div 保持其在 DOM 中的位置，请尝试将其不透明度设置为 0 以开始：

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

然后调用：

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