Question

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

我试过这个，但它不起作用：

div.mydiv { display: inline none; }

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

修改我在div中有其他块元素，因此我无法使用span。

Answer 1

<强> CSS：

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

<强> HTML：

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

<强> JS：

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

Answer 2

为什么不尝试使用display none的内联css？比如<div style="display:none;">abc</div>

Answer 3

你写错了css

的CSS：

div.mydiv { display: none; }

jquery的

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

Answer 4

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

Answer 5

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

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

Answer 6

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

Answer 7

在用于显示/不显示此div标签的函数中进行编码会更加容易，该部分将显示变量从内联更改为无，反之亦然。

您不能同时设置内联和非设置。

Answer 8

您已经收到了相当多的回复，因此我将以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>

您不能指定内联和非显示，它们相互矛盾。
@ moonwave99可能是最好的方法，你保持一致的风格，你保持你的div（虽然你不应该，如果你想内联，使用内联标签），你有你的显示/隐藏功能
@jeoj建议可见性，可见性占用空间，所以如果你的div是30x30像素，即使隐藏可见性，它也会占用30x30的html空间，其中hide（）/ display：none不会，你可能没想到/想要这个。
@Sebsemillia响应是正确的，但你的div不会按照你想要的内联，show（）会使它显示为块作为div，这是它的默认样式。
@siraj pathan的反应很好，但是当你想要隐藏时，你必须采用相同的方法或2个不同的方法，使它非常不一致。
@Akie建议内联，不要这样做，内联CSS不好。

使用CSS隐藏内联div

8 个答案: