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');