Question

我访问了一个网站，一个功能让我很开心，但我无法弄清楚如何复制它！ XD有人可以帮帮我吗？

我想复制this site's版权通知我的网站的功能，以奖励我和我的同事。

我将非常感激。谢谢。

Answer 1

您引荐的网站使用jQuery library。这真的很简单。像这样的陈述

$("#mydiv").hide();

将隐藏ID为“mydiv”的<div>。您也可以show代替hide，也可以将号码传递给该功能，例如hide(200)为动作制作动画。在这种情况下，将div的隐藏设置为200 ms以上。

还有toggle effect可以隐藏或显示元素。

我建议您阅读jQuery documentation中的jQuery事件和选择器。

同样在将来，Googling your question在您提出要求之前可能会节省一些时间; - ）

修改

实际上，您在链接的网站上描述的特定功能是使用HTML5元素 andronikus 进行讨论的。可以说HTML5尚未准备好在网络上使用，因为仍有许多浏览器无法处理它。在我看来，使用jQuery show / hide是目前更好的解决方案。

Answer 2

如果您使用的浏览器或扩展程序允许您右键单击“检查元素”，则可以直接查看页面元素的代码。在这里，该页面使用新的[<details>][1]标记，这是HTML5中的新标记。它看起来像这样：

<details>
  <summary>Always show this</summary>
  <p>This stuff is hidden until you click the arrow.</p>
  <p>Woooo!</p>
</details>

没有Javascript / jquery可以搞乱，虽然可能还有一些CSS发生。这是一个非常酷的新元素！

（通常这可以通过jQuery show（）/ hide（）完成，如其他答案和评论中所述。我怀疑它已添加到HTML5中，因为它是一个非常常见的功能。）

Answer 3

您可以使用jQuery slideToggle（）实现。

<div id="inner">
  <div class="text">
  Your Text
  </div>
</div


$(document).ready(function(){
$(".text").hide();
$("#inner").click(function(){
$(".text").slideToggle();
});
});

您可以在此处查看更多信息 http://www.sendesignz.com/index.php/jquery/72-how-to-implement-toggle-search-box-in-jquery

显示/隐藏Div或Element

3 个答案: