Question

登录到Facebook后，在主页选项卡后面有一个向下箭头符号。点击它会显示一个div（？），它只显示在现有内容上，另一次点击它会消失。

我怎样才能做出这样的事情？

修改

我从TheBlackBenzKid跟踪了这个link。有一点很清楚，点击按钮时，只有2个div被切换。

但AFAIK切换是在鼠标点击时发生的。所以'click'事件应该在jquery代码中。

1）但我没有找到它。那是哪里？

2）有一些css使得菜单可以出现在一个地方而不会使现有内容脱离（从演示中看不到，但实际上确实发生了）。什么是css代码？

Answer 1

这就是我要做的，但它是一个非常基本的解决方案。

div id="arrowid">▼</div> 
<div id="dropdownbox" style="display:none;">Dropdownbox</div>

<script type="text/javascript"> 
$(document).ready(function() {
$('#arrowid').click(){ 
$('#dropdownbox').toggle();
});   
});
</script>

这个不支持外部点击，它只是在点击箭头时显示和隐藏。希望它有所帮助！

Answer 2

如果您使用的是jQuery，可以使用.slideToggle()来实现此效果。

使用它以滑动方式显示或隐藏匹配的元素。

.slideToggle( [duration] [, easing] [, callback] )

duration：确定动画运行时间的字符串或数字。

easing：一个字符串，指示用于转换的缓动函数。

callback：动画完成后调用的函数。

Answer 3

有很多方法可以做这些事情：thefinishedbox.com/files/freebies/dropdown-gui/index.html这是一个很好的方法，已经带来简单干净的CSS外观和感觉

facebook主页喜欢拉下div

3 个答案: