使用CSS隐藏内联div

Question

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

我尝试了以下代码，但并没有起作用：

div.mydiv { display: inline none; }

如果我去掉none，只使用jQuery的hide()函数，它就能正常工作。但这样做，元素直到页面加载并执行JavaScript代码后才会被隐藏。 编辑 我在div内有其他块级元素，所以不能使用span。

- John29

---

你能否在 JSFiddle 上分享你的代码？这会很有帮助。 - 5eeker

你不应该将div设置为inline，而应该使用<span>代替。 - Paulie_D

只需将它设置为 { display: none; }。 当您想要显示它时，再添加任何其他自定义 CSS... - dotnethaggis

正如Paulie_D所提到的，使用span代替div，然后默认情况下保持span.mydiv{ display: none;}，然后通过使用jQuery的$(elem).show()在需要显示元素时进行显示。 - Mr_Green

如果在span标签中包含其他块级元素，将会使你的HTML无效。参见：https://dev59.com/ZG025IYBdhLWcg3wW0kc - GolezTrol

Answer 1

CSS：

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

HTML：

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

JS：

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

- moonwave99

---

谢谢，它有效。在发布问题之前我尝试了你建议的同样代码，但是我的 CSS 文件中 .hidden{ display: none: } 出现在 .mydiv { display: inline; } 之前，出乎意料地无法正常工作，但是反转顺序后就解决了问题。 - John29

Answer 2

为什么不尝试使用内联CSS并采用`display:none`的方式？例如：`

abc

`。

- Ashif Nataliya

Answer 3

你写错了 CSS

CSS：

div.mydiv { display: none; }

jQuery

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

- siraj pathan

Answer 4

或许 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");
 }

- jeoj

Answer 5

你已经得到了相当多的回复，所以我想说一下你所得到的意见：

你应该将你的div改成span，这些默认是内联的，并且会按照你期望的方式与.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>

• 您无法同时将内联和非内联分配给显示，它们相互矛盾。

• @moonwave99 可能是最好的方法，您可以保持样式一致，保留您的 div（尽管如果您想要内联，请使用内联标记），并且具有显示/隐藏功能。

• @jeoj 建议使用 visibility，visibility 占用空间，因此如果您的 div 是 30x30 像素，即使 visibility 被隐藏，它也会占用 30x30 的 html 空间，而 hide() / display:none 不会，您可能没想到 / 不想要这种情况。

• @Sebsemillia 的回答是正确的，但您的 div 将不会像您想要的那样内联，show() 会将其作为块显示，因为它是一个 div，这是其默认样式。

• @siraj pathan 的回答很好，但当您想要隐藏时，您将不得不执行相同的方法或两种不同的方法，使其非常不一致。

• @Akie 建议使用内联，不要这样做，内联 CSS 不好。

- viion

Answer 6

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

- Sebsemillia

---

它会生效，但当div可见时，我还需要内联。 - John29

那么请使用 span 而不是像其他人建议的那样使用 div。 - Sebsemillia

Answer 7

显示属性不能同时是内联（可见）和无（隐藏）。

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

- Fix

---

这是一个翻译任务，不是答案。请提供要翻译的英文内容。 - Paulie_D

Answer 8

在用于显示/隐藏此div标签的函数中，编写一个能够修改显示变量从inline更改为none或者反之互换的部分会更容易。

不能同时设置inline和none。

- Travis Knight