切换（显示/隐藏）元素 | CSS-Tricks

James

# 2009年9月8日

这是什么？……看起来像是从某个浴室墙上擦下来的……

函数语句在哪里？如何使用var声明局部变量？

Chris Coyier

评论永久链接# 2009年9月8日

我认为这是一个糟糕的复制粘贴工作造成的。稍微修复了一下。
James

评论永久链接# 2009年9月9日

感谢你的修复，Chris。 :)
Ben Kaminski

评论永久链接# 2013年12月10日

抱歉在旧帖中评论，Chris，但这对我来说非常有效！你的网站非常有用，非常感谢！

谢谢Chris！
aitch

评论永久链接# 2020年9月20日

只是想知道作为一个JS新手，像Chris在上面示例中那样内联应用函数是否更好，或者是否有其他方法可以不直接内联地返回函数？谢谢！

Dyllon

# 2009年9月13日

我唯一的问题是第一次必须点击两次链接才能使其消失。

Drew

评论永久链接# 2009年10月9日

为什么需要点击两次？我是JavaScript新手，这让我抓狂！
someone

评论永久链接# 2013年8月14日

更改
<div id="foo">This is foo</div>
至
<div id="foo" style="display:none;">

Susanne

# 2020年4月25日

以“none”而不是“block”开始，这样你就不必先点击两次。

function remove() {
  let x = document.getElementById("text");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Nanobyte

# 2009年9月20日

这个函数效果更好！

function toggle_visibility(id) { var e = document.getElementById(id); e.style.display = ((e.style.display!='none') ? 'none' : 'block'); }

Voreno

评论永久链接# 2020年7月3日

你好！

感谢这段代码和评论。
我是JavaScript新手，我将标签链接更改为“显示”。

是否可以将标签在显示和关闭之间切换？

谢谢你的关注

Voreno

Jayaprakash

# 2010年2月1日

我觉得如果可能的话应该避免使用display:none。某些版本的基于Webkit的浏览器将display:none视为元素不再是DOM的一部分。

相反，你可以使用以下CSS类

.hidden{
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}

使用JavaScript代码后，如果希望隐藏或显示元素，可以分别添加或删除类名。

优点是元素始终存在于DOM中，但在隐藏状态下不可见。

homi

评论永久链接# 2013年3月3日

非常有用的代码片段。对我来说非常有用。继续努力
mike

评论永久链接# 2013年6月11日

@Jayaprakash – 这是这里概述的最正确的方法。

@Escrimador

作为一名老码农，你应该记得三层分离原则吗？
使用JS切换（交互）类，并让CSS完成视觉工作。

我个人喜欢保持覆盖尽可能简单

.hide {
position: absolute;
left: -200em;
}

请注意使用em，当用户增加字体大小时，它会将内容推离屏幕更远。
大多数时候都可以工作，但有时您可能需要

.hide {
position: absolute;
left: -200em;
width:0;
height:0;
overflow:hidden;
}

但这很少见，最好使用最小版本，直到它失败。
lori

评论永久链接# 2015年6月24日

不错，但我相信屏幕阅读器仍然可以在.hidden中看到内容，这对视力障碍者来说不是最佳选择。
如果我错了，请纠正我。
anand

评论永久链接# 2015年10月5日

您好，先生，
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!=’none’) ? ‘none’ : ‘block’);
}
一
 二
 三
如果我点击所有三个控件，则div内容会被覆盖（合并到相同的内容中）。我如何忽略它。

Pu

# 2011年11月3日

这很棒，感谢你的支持！

Escrimador

# 2011年11月15日

那么display:none何时被弃用？Jayaprakash，你甚至知道visibility:hidden和display:none的区别吗？

现在我从1995年CSS诞生之前就开始做CSS开发了，现在已经做了将近11年的高级UI工程师，直到今天，许多所谓的CSS开发者甚至无法回答这个简单的问题。

请在提供CSS帮助时，请确保正确！你现在甚至知道何时使用position:absolute以及如何在浏览器调整大小时使其随“父”元素移动吗？天哪……哈哈！

很明显你不知道CSS编码。事实上，display:none仍然存在于css3中，以及所有其他新的伪类。

MacGuyver

评论永久链接# 2012年5月31日

你在CSS引入之前就是CSS开发者？
我本想向你表示敬意，但我在不使用互联网的情况下使用了互联网。
Nick

评论永久链接# 2012年10月29日

@Escrimador 你天生就粗鲁，还是故意要这样？@Jayaprakash只是简单地指出，有时你希望隐藏一个元素，但又不想让它从DOM中消失，因为这意味着你的JavaScript程序也会失去对它的跟踪。
Speaker-to-Animals

评论永久链接# 2012年12月15日

visibility:hidden 会保留项目所在的空间，而display:none则会关闭间隙，因此你无法看出布局中缺少元素。
Bobby

评论永久链接# 2013年1月24日

我认为没有必要为了回答一个简单的问题而显得如此居高临下。在行业工作十年后，你应该知道不要那样做。

你那个没人知道的“难题”非常简单。visibility:hidden 保留项目的位置但使其不可见。display:none 完全将其移除。并不是那么复杂，我相信知道这一点的人比你想象的要多。

你的整篇文章毫无信息，只会让你看起来需要向某人证明自己。如果你要批评别人的帮助，为什么不尝试真正提供帮助呢？

如果你需要帮助理解你的第三段，我建议你查找继承和嵌套。后者比前者更重要。

Escrimador

# 2011年11月15日

好的，Pu，让我告诉你Jayaprakash没有告诉你的事情，因为他不是合格的CSS人员。

visibility:hidden 的区别在于，虽然它在网页上不可见，但它仍然占用空间。这意味着，如果隐藏的元素假设宽500像素，高500像素，并且位于页面中间，在标题和页脚元素之间，那么“当使用VISIBILITY:HIDDEN时，网页上将始终存在一个500X500的空隙”。

使用display:none，假设有相同的元素，标题和页脚，中间有一个元素设置为display:none，除非/直到通过javascript/jQuery或css进行操作，否则网页上将没有可见的和“不需要的空白空间”。你从下拉菜单和手风琴中获得相同的效果。

在阅读博客上的答案时要小心。有些人对答案如此不负责任，而且显然不知道自己在说什么，这真的让我很恼火。

MacGuyver

评论永久链接# 2012年5月31日

看看这位声称在 CSS 推出之前就开始开发 CSS 的人。
Nick

评论永久链接# 2012年10月29日

@Escrimador，@Jayaprakash 提到的名为 hidden 的类将元素定位为绝对定位，这意味着它从文档流中移除。然后 left: -9999px 和 top: -9999px 将其移出页面。所以你再次错了。

.hidden{
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}
CSS 修正

评论永久链接# 2014年9月14日

@Escrimador – 哈哈哈哈哈，你居然声称在 CSS 出现之前就用过 CSS。再哈哈哈哈哈，你的 CSS 技能如此精湛，居然不知道 top 和 left 的负值会将元素从页面中移除，从而消除看到空白的可能性（这是你论证的基础）。我想你确实需要更多练习你的 CSS 吧？我估计你 10 多年的经验应该能发现这一点。

他有一点是对的，即使他的帖子来自 2011 年。你应该对博客文章保持警惕，因为你可能会遇到像他这样的白痴，自称专家，却没意识到负插入移除了元素，即使 THIS 新手都知道。哈哈！
Thumper

评论永久链接# 2017年12月18日

哇！@Escrimador，
我知道我错过了这个故事，但我根据需要使用这两种方法。当使用 SVG 图像时，我可能会使用 'visibility:hidden'，因为它是在 DOM 中的图像，并且不会移动，我也不会冒险让浏览器尝试移动它们，因此以谨慎为原则。
其他时候，例如数据来自外部来源到图像地图中，是的，再次使用图像。但这次，当数据表明该元素不存在时，我使用 'display:none' 将其完全从页面中移除。
所以请帮我理解，我在我的使用概述中哪里粗鲁了？为什么你不能更像样一点，而不是……嗯，你是什么样子的。（我们需要减少世界上‘你这种类型’的人）

Doc Brody

# 2011年12月16日

伙计们，对 Jayaprakash 的反应太过分了。

他从未真正说过 display none 已过时。没有理由对他进行人身攻击。

他只是说一些浏览器处理方式不同……“某些基于 Webkit 的浏览器版本认为 display:none 就像元素不再是 DOM 的一部分”

如果这是真的，它可能会解释我看到的一些奇怪行为。我真的很想知道确切情况。

Bruce

# 2012年1月17日

我正在使用此方法创建常见问题解答，其中每个答案默认隐藏，只有在单击问题时才会显示。有没有办法使用 url 和锚点定位特定问题，以便在访问链接时，它会滚动到该问题，并且该答案默认展开？

谢谢！

Ntechi

# 2012年2月15日

嗨，Chris，我多次使用 jQuery 进行切换，在我一个客户的网站上，这次我使用 CSS3 通过 :target 进行切换。它确实有效，所以我写了一个教程，在这里分享 :)

http://webstutorial.com/html5-css3-toggle-slideup-slidedown/html-5

Gruber

# 2012年3月10日

@Dillon @Drew 双击问题也给我带来了一些麻烦，但我找到了解决方案，感谢这篇文章。

简单来说，第一次点击触发函数的 if 部分并询问“元素的 display 属性是否设置为 block？”，并且函数“过早”终止（可以这么说），因为它正确地检查了该查询。第二次点击使脚本工作，因为它已经用第一次点击检查了 if 要求。
所以你必须以某种方式“欺骗”脚本的询问逻辑。



    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }

这样只需要点击一次，因为它会询问“元素的 display 属性是否设置为 none？”，函数检查它不正确，并直接传递到 else 部分设置所需的效果！
希望这在某种程度上是可理解的，英语不是我的母语；)
干杯！

oliverosm

# 2012年3月22日

一个问题，如何在不同的 div 中实现这一点。
感谢分享。

oliverosm

# 2012年3月22日

谢谢，我已经找到了方法。

Max

# 2012年4月8日

我想知道是否有一种方法可以隐藏 Div 中的内容，并通过单击锚点来打开它，而不是一开始就打开它，然后需要单击它才能关闭。所以基本上是当前脚本的相反操作。提前感谢。

Red5

评论永久链接# 2012年5月7日
很棒的帖子，Chris！Max，我能够通过简单地向我正在应用脚本的元素添加 display:none 声明来获得你规定的结果。

然后你必须确保脚本按照 Chris 的原始帖子中的编写方式编写，其中脚本的初始点击显示块，如下所示
```
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
```
这将确保页面加载时元素不会显示，并且只需单击一次即可将其切换为显示。

kwasi

# 2012年4月15日

在使用显示或隐藏元素时，我在同一个 div 中放置了两个元素。我想做的是当另一个元素显示时隐藏一个元素。这是因为当一个元素显示而另一个元素也显示时，后者会叠加在较早者之上。我只想显示新的那个。我该怎么做？

Alex

# 2012年7月1日

嘿，谢谢这个！
我遇到一个问题，div 确实按预期显示和隐藏，但每次我单击切换时，都会被带到页面顶部。这在 FF 和 Chrome 中都是如此。有什么想法吗？
谢谢！

Steph

评论永久链接# 2012年8月3日

嘿，Alex，
这可能是因为示例中的锚点目标是“#”，它会将你跳转到页面顶部，因为浏览器正在寻找一个没有名称的 ID。带有“#header”目标的链接同样会将你跳转到具有“header”ID 的元素！
使用带有 onclick 事件的 span 应该让你完全放弃目标
<span onclick="toggle_visibility('foo');">点击我</span>

Peter Lisi

# 2012年8月18日

非常酷，非常有用的代码片段，但我想在单击它并显示最初隐藏的内容后，删除或隐藏“阅读更多……”按钮。

Leo VAP

# 2012年9月12日

非常感谢！非常有用！

Brand7

# 2012年9月14日

我将代码更改为如下所示，它运行良好。但我不太确定的是如何使图像在两种状态下都显示出来，我想使用展开和折叠，但它不起作用。我不是 JS 开发人员，我对 HTML 和 CSS 非常了解，但对 JS 不太了解，我可以理解它，但不能编写它。有什么想法吗？

KW

# 2012年9月14日

我很好奇，谁能解释一下如何编写代码，以便在打开切换时显示切换内容的顶部？

每当我使用包含大量文本的切换时，我都会遇到一个问题，即在打开它们时，屏幕显示切换字段底部的信息，而不是顶部。

我想改变这一点。感谢您的任何帮助。

Andrew Austin

# 2012年9月20日

我在 IE 9（真是的）中使用此切换时遇到问题。我正在使用它来切换导航，并且当此脚本就位时，IE 9 实际上会吞噬我的列表项。有没有人遇到过类似的问题或解决方案？这是我的标记

    <div id="mobile-nav-header"><a href="#" onclick="toggle_visibility('mobile-menu');">Menu</div>
    <nav id="mobile-menu" role="navigation">
        <ul>
            <li><a href="#photos">Photos</a></li>
            <li><a href="#etc">Et Cetera</a></li>
        </ul>     
    </nav>

Brandon

# 2012年10月11日

如果网页同时包含 1) 必须触发以隐藏的 display: block div 和 2) 必须触发以显示的 display: none div，我似乎无法使这些函数工作。反转函数的逻辑将需要 2 次点击才能显示和 1 次点击才能隐藏，或者 2 次点击才能隐藏和 1 次点击才能显示。如何正确编写此函数以仅用 1 次点击应用于这两种情况？

abner calapiz

# 2012年12月13日

你好 WordPress，这个网站有什么问题 - http://theblackcheese.org/category/blog/

为什么帖子不可见？类别帖子也不可见，所有帖子都不可见，请帮助我。

此致,
Abner

Peter Osborne

# 2013年1月24日

此脚本很棒！感谢分享。我遇到的一个问题是如何正确“隐藏”其他由其他点击事件显示的 div。我有两个按钮我想在这个脚本上使用，但我需要在单击另一个按钮时关闭一个按钮显示的内容。

我不确定这是否有意义。我只是不想同时显示两组信息。感谢您提前提供的所有帮助！

ElabStudios

# 2013年1月28日

您好，我阅读过搜索引擎（如 Google）会忽略 Javascript。因此，如果我使用此代码将文本放置在切换内，它会被忽略还是 Google 会抓取文本？

对此的快速回复将非常有帮助。

rina

# 2013年3月6日

谢谢……

SK

# 2013年3月13日

你好，
我有一些文本链接都使用“onClick Show/Hide”，但我想在点击链接“之前”在该空间中显示另一个图像。
另外，我希望“当前”文本链接保持粗体，直到点击下一个链接。
我认为这对你们所有人来说可能是一个简单的解决方案。谁能帮忙？先谢过。 :)

我现有的：http://thispixelstudios.com/working/scottsdaleranch/index_test.html

我想要的效果示例（垂直4个链接部分）：http://www.drsrtc.com/

Serge

# 2013年4月29日

谢谢各位，不知何故，在绝望地阅读了如何在网络上至少5个不同的讨论板上实现如此简单的代码片段后，我又回到了CSS Tricks。

我特别想指出其他谷歌搜索者Steph的< span >用法，以避免将用户发送到页面顶部。

再次感谢！

Mark

# 2013年5月18日

这个脚本运行良好，谢谢。

但是有没有办法为它添加一些动画，使其更加流畅？

Umesh Krishna

# 2013年5月23日

这个一直运行良好
 http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

aris

# 2013年7月4日

很棒，清晰，简洁！

Andrew

# 2013年8月5日

对此有任何添加过渡/动画的建议吗？

据我所知，CSS过渡不适用于display属性。

Louis

永久链接到评论# 2014年6月23日

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ‘block’) {
//将不透明度设置为零，CSS过渡持续时间为0.3秒
e.style.opacity = ‘0’;
//设置300毫秒的超时（或CSS的过渡持续时间）以从流中删除元素
setTimeout(function(){
e.style.display = ‘none’;
}, 300)
} else {
//立即将元素放回流中
e.style.display = ‘block’;
//现在将元素的不透明度设置为1，这将通过CSS过渡很好地完成
e.style.opacity = ‘1’;
}
}

搞定啦 ;)

Don in Michigan

# 2013年8月12日

HAHAHA – 你们在开玩笑吧？拜托，继续吧，这很有趣。你们在争论一些代码片段。你们比一群争论贾斯汀·比伯音乐的14岁女孩还糟糕哈哈…

Bowman Kelley

# 2013年9月4日

很棒的脚本，它不会与我的页面上已经使用的jQuery冲突！谢谢

AucT

# 2013年9月11日

我将此用于小型项目。但在我看来，添加/删除类要好得多。

function toggle(id) {
      el = document.getElementById(id);
      el.style.display = (el.style.display == '') ? 'none' : ''
    }

Sergiu C

# 2013年10月11日

不要使用visibility:hidden，而使用display:none; 这样默认情况下隐藏你的元素，并创建这样的动画，可以通过单击事件滑动切换或仅仅显示和隐藏..

Ermira

# 2013年11月3日

你好！我已经实现了这个功能，但问题是当隐藏的元素出现时，页面其余部分不会向下移动。所以元素会出现在页面其余部分的上方。有什么方法可以避免这种情况吗？谢谢！

HSK东西

# 2013年12月17日

嗨，感谢提供方便的代码，但在Chrome中它对我不太起作用——我遇到了双击问题。原因是，从我的div样式设置为display:none开始，e.style.display是一个空字符串“”，而不是“none”。所以避免双击问题的方法是测试字符串是否不等于“block”，这样可以以相同的方式处理“none”和“”。

function toggle_visibility(id) {
    var e = document.getElementById(id);
    e.style.display = ((e.style.display != 'block') ? 'block' : 'none');
}

Bangash

# 2014年1月15日

你好，
非常感谢大家分享很棒的东西。
我做了你们展示的所有操作，效果很好。
我有一个问题。
如果我想从另一个页面链接隐藏的div，以便当我点击该链接时，它会打开特定的div并保持其余div关闭，该怎么办？
非常感谢。

Ashely

# 2014年1月17日

使用JavaScript甚至可以更简单地完成。CSS3提供了这样的功能，您可以使用复选框技巧，这是一个示例，它也像您的JS一样简单：仅使用CSS3创建切换框以折叠或展开内容

Cat

# 2014年1月31日

该函数很棒，但是如何在表格中使用它？<div>在表格中效果不佳。我有一堆链接在表格单元格中，它们都属于“page”类

<table> <a href="visible1.html" rel="nofollow">可见页面1</a> <a href="visible2.html" rel="nofollow">可见页面2</a> <a href="test1.html" rel="nofollow">test1</a> <a href="test2.html" rel="nofollow">test2</a> <a href="test2.html" rel="nofollow">test3</a>

如何编写javascript函数来显示/隐藏链接？谢谢！

ftoweren

# 2014年3月29日

一些修改>
javascript
<script type="text/javascript">  </script>

html
<input type="button" value="显示" onclick="toggle_visibility('test');"> <div style="display:none;" id="test">div内容</div>

Dave

# 2014年5月3日

不错，但你可以为它添加动画

function toggle_visibility(id) {
   var e = document.getElementById(id);
       if(e.style.height == '150px'){e.style.height = '0';}
   else{e.style.height = '150px';}
}

并添加一些样式

#mobileMenu{
list-style: none;
width: 100%;
-webkit-transition:all 1s ease-in-out;
height:0;
overflow:hidden;
}

到菜单中 :)

`<a href="#" rel="nofollow"></a>

etc`

tom

# 2014年6月11日

你好，如何将此显示隐藏功能用于多个元素？我想有3个“foo”具有相同的id，无论我点击哪个，我都显示/隐藏所有这些。如何编辑此代码？

Dixon

永久链接到评论# 2014年6月29日

Tom，要知道，这样使用多个具有相同id的元素是不行的。我的解决方案是做类似的事情

JS函数接受一个带有分隔符（如逗号“，”）的字符串变量

function toggleMultiple(s) {
var parts = s.split(“,”);
for (var i=0; i < parts.length; i++) {
var obj = document.getElementById(parts[i]);
if (obj.style.display=='none')
{
obj.style.display='block';
}
else
{ obj.style.display='none'; }
}}

在元素中使用onClick="toggleMultiple('foo1,foo2,foo3');"

希望对您有所帮助。

Mak

# 2014年6月17日

你好

如果你有多个Div，如何使用这个功能，使你点击的Div显示在屏幕上，而其他Div隐藏？

Dixon

永久链接到评论# 2014年6月29日

Mak，

你的问题不太清楚，也许你可以参考我针对tom提出的代码。那是不是你想要做的？

Punit

# 2014年7月1日

它可以工作，但是如何隐藏点击按钮以及如何更改点击时的按钮呢？

Erik Gloor

# 2014年7月2日

我的天哪，这个小片段彻底帮我解决了难题。谢谢Chris！！！

johnnyp

# 2014年7月14日

你是个天才！

Bryan Veloso

# 2014年7月28日

我在jsfiddle中尝试时不起作用。奇怪…

Moh

# 2014年8月16日

你好
请教一下，当用户点击DIV外部时，如何隐藏它？
谢谢

Marcus

# 2014年8月19日

如果我想让div一开始隐藏，然后点击显示，我应该如何更改代码？ :)

谢谢

Noxx

# 2014年9月9日

谢谢！我对网页开发非常陌生，对JavaScript一无所知。如果我仔细看它足够长的时间，我就能弄清楚它在做什么，所以这段小程序非常适合我想要做的事情 :)

ajim

# 2014年10月6日

请教一下，我刚开始学习JavaScript。我需要一个脚本可以切换多个div。也就是说，当我点击一个时，其他div会关闭，而无需再次点击它。下面是我开发的内容，但它需要我再次点击才能关闭。
函数clicmHandler (id ){

var e = document.getElementById(id);
if (e.style.display == 'block') {
e.style.display = 'none';
else
e.style.display = 'block';
}
}

Nemo

永久链接到评论# 2015年8月6日

正在寻找完全相同的东西！
有人有答案吗？？

Abhishek sen

# 2014年11月13日

如何使用相同的ID隐藏/显示不同的元素。例如博客的不同部分

mukul

# 2014年12月18日

你可以使用它，它可能会帮助你-

http://findnerd.com/list/view/How-to-open-and-close-div-using-css/462/

Squiggles

# 2015年1月27日

有没有办法有两个不同的链接？

隐藏图像（当图像显示时）
显示图像（当图像隐藏时）

robert

# 2015年2月3日

非常有效！！ :)
我有点像编码学习者，如何为此启动slideToggle效果？

谢谢！

saisudhakar

# 2015年3月4日

它运行完美，伙计！太棒了。

L. Hansen

# 2015年4月24日

我一直在用这个切换功能做一些事情，做一个包含三种不同语言的单页网站。我想在同一页面上包含所有三种翻译，这样我就不必编写多个html文档了。我想出了以下内容；

JavaScript

<script type="text/javascript">
function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("class");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}
</script>

以及文本示例

<a id="myHeader1" href="javascript:showonlyone('newboxes1');">SV</a>
<a id="myHeader2" href="javascript:showonlyone('newboxes2');">DA</a>
<a id="myHeader3" href="javascript:showonlyone('newboxes3');">EN</a>
<div class="newboxes" id="newboxes1">
  <p>Svensk</p>
</div>
<div class="newboxes" id="newboxes2" style="display:none;">
  <p>Dansk</p>
</div>
<div class="newboxes" id="newboxes3" style="display:none;">
  <p>English</p>
</div>

Raghavendra

永久链接到评论# 2018年10月3日

L. Hansen先生，这太棒了。我喜欢它。想知道为什么即使以UTF-8编码保存，印度本地语言的Unicode也没有显示。请指导我。谢谢。

Nicholas Abrams

# 2015年4月26日

当您切换不应具有块级定位的元素时会发生什么？您正在强制所有通过此函数运行的元素在块或无显示值之间切换。如果它是一个内联元素或设置为内联块怎么办？

function toggle_visibility($elm) {

$elm.is(':visible') ? $elm.addClass('hidden') :  $elm.removeClass('hidden');

};

我使用这种逻辑，但使用jQuery，显然is(':visible')的普通解决方案会更冗长。

这将允许您保留浏览器DOM的原始位置属性。如果这已经涵盖了，我深感歉意。

Jared

# 2015年5月29日

有人可以告诉我如何使文本最初隐藏吗？

JJ

永久链接到评论# 2015年6月17日

嗨，试试我下面评论中的代码……

JJ

# 2015年6月17日

非常感谢！简单，简短而甜蜜！（=）我做了相反的方式……先隐藏文本，然后点击时显示。

这是代码

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
</script>
This is it.
<a href="#bar" name="bar" onclick="toggle_visibility('foo');">Read more...</a>
<div id="foo" style="display:none;">Show this FOO.</div>

Jose6to

永久链接到评论# 2016年11月14日

不知道该如何感谢你！你的代码正是我想要的！

谢谢！！！！

Danse

# 2015年8月8日

嘿！我想感谢你为此！谷歌上有如此多的搜索结果，有如此多的非常复杂的设备来显示/隐藏一个

<

div>，我都不认为我会找到一个值得并且运行如此流畅的东西。很棒，简单，并且直截了当。

satyendra yadav

# 2016年1月17日

这是一个非常好的切换示例
它是有用的代码，非常易于理解

谢谢

James

# 2016年3月15日

有没有办法在链接被点击后使其消失？

所以，有一个链接说“点击阅读更多”或类似的东西。当您点击它时，div会出现（我已经能够通过包含display:none;标签来实现），并且同时div出现，“点击阅读更多”链接消失

judyofthewoods

永久链接到评论# 2016年3月21日

@James 我做了一个可能会有用的笔。微小的脚本通过更改您点击的文本的显示样式以及隐藏的div（可以包含任意数量的内容）的显示样式来替换该文本。它不是切换。

dami

# 2016年5月31日

简单有效！干得好，谢谢！

Robin

# 2016年8月5日

我试图让元素最初隐藏，然后在点击时显示。我尝试使用display: none;或visibility: hidden;但这会导致它根本不显示，即使点击了按钮也是如此。我还尝试调整原始代码的样式显示以反映相反的内容，就像有人在之前的评论中建议的那样，但没有任何反应。

任何其他人对如何使元素隐藏然后在点击时显示有任何其他建议或修复吗？

daniel

# 2016年9月10日

你好！
我正在改编一个我找到的简单的滑块脚本，并且运行完美。对每个

内联使用

发表评论取消回复

内联使用

评论

发表评论 取消回复

发表评论取消回复