使用 CSS 隐藏内联 div答案

【问题标题】：Hide inline div using CSS使用 CSS 隐藏内联 div
【发布时间】：2014-07-03 18:19:09
【问题描述】：

我有一个内联 div 需要默认隐藏，然后使用 jQuery 的 show() 和 hide() 函数。

我试过了，但它不起作用：

div.mydiv { display: inline none; }

如果我删除 none 并只使用 jQuery 的 hide() 函数，它就可以工作。但是这种方式在页面加载并执行 JavaScript 代码之前不会隐藏元素。

编辑我在div 内还有其他块元素，所以我不能使用span。

【问题讨论】：

你能把你的代码弄成 jsfiddle 吗？会有帮助的
你不应该制作 div inline...改用<span>，
只要设置为 { display: none; }。当您想要显示它时，添加任何其他自定义 css...
使用默认内联的 span，而不是 div。如果你真的需要 div，那么浮动它并显示：none。
使用span 代替div 会使您的HTML 无效，如果其中有其他块元素。另见：stackoverflow.com/questions/6061869/…

标签： html css

【解决方案1】：

CSS：

.mydiv { display: inline; }
.hidden{ display: none; }

HTML：

<div class="mydiv hidden"></div>

JS：

$(function(){
  $('.myDiv').removeClass('hidden');
  // do your business here
});

【讨论】：

谢谢，它有效。在发布问题之前，我尝试了与您建议的代码相同的代码，但我的 CSS 中在 .mydiv { display: inline; } 之前有 .hidden{ display: none: }，并且由于某种原因它不起作用，但是颠倒顺序就可以了。

【解决方案2】：

你为什么不试试不显示的内联css？喜欢<div style="display:none;">abc</div>

【讨论】：

【解决方案3】：

你写错了css

css:

div.mydiv { display: none; }

jquery

$('div.mydiv').css('display','inline');

【讨论】：

【解决方案4】：

只需使用display: none;。这样它就会从一开始就隐藏起来，您可以通过.show() 再次显示它。

【讨论】：

它会，但当 div 可见时我也需要内联。
然后使用 span 而不是 div 就像其他人已经建议的那样。

【解决方案5】：

display 属性不能同时是 inline（可见）和 none（隐藏）。

如果删除内联部分会发生什么？

【讨论】：

不是答案。这应该是一条评论。

【解决方案6】：

在用于显示/不显示此 div 标签的函数中编写一个将显示变量从内联更改为无的部分会容易得多，反之亦然。

您不能同时设置 inline 和 none。

【讨论】：

【解决方案7】：

您已经收到了相当多的回复，所以我将投入 2 美分来评价您的回复：

您应该将您的 div 切换为，这些默认情况下是内联的，并且会按照您对 .show() 和 .hide() 函数的预期表现。如果您确实必须保留 div，那么您可以浮动它们，但这会改变布局的完成方式，您将不得不期待这一点。

<style>
span.myspan { display: none }
</style>

<span class="myspan">test</span>
<span class="myspan">test</span>
<span class="myspan">test</span>

<script>
$('span.myspan').click(function()
{
    $(this).hide();
})
</script>

您不能指定 inline 和 non 来显示，它们相互矛盾。
@moonwave99 可能是最好的方法，你保持风格一致，你保持你的 div（虽然你不应该，如果你想内联，使用内联标签）并且你有你的显示/隐藏功能。
@jeoj 建议可见性，可见性占用空间，所以如果你的 div 是 30x30 px，即使可见性被隐藏，它也会占用 30x30 的 html 空间，而 hide() / display:none 不会，你可能不期望/不想要这个。
@Sebsemilia 响应是正确的，但是您的 div 不会像您想要的那样内联，show() 会使其显示为块作为它的 div 并且这是它的默认样式。
李>
@siraj pathan 的响应很好，但是当你想隐藏时，你必须使用相同的方法或 2 种不同的方法，这使得它非常不一致。
@Akie 建议内联，不要这样做，内联 CSS 不好。

【讨论】：

【解决方案8】：

也许http://jsfiddle.net/Y5ddh/ 会起作用？

CSS：

.hidden {
    visibility: hidden;
}

.inline {
    display: inline;
    background: red;
}

HTML：

<div class="hidden inline">
    <p>Lorem ipsum</p>
</div>
<div class="inline">
    <p>Lorem ipsum</p>
</div>

<button type="button" onclick="toggle()">Toggle</button> <!-- for demo -->

第一个 div 被隐藏，但仍将其空间作为内联元素。这是你想要的吗？

JS：

 function toggle() {
   var hidden = document.getElementById("hidden");

   if(hidden.getAttribute("class") == "hidden inline")
     hidden.setAttribute("class", "inline");
   else
     hidden.setAttribute("class", "hidden inline");
 }

【讨论】：