Question

我正在尝试在Gmail的顶部栏上实现一个弹出式面板。如果你单击设置图标，你的名字或共享链接，面板就会下降......是否有一个jquery插件或某些东西可以让我快速实现某些东西以产生类似的效果？

Answer 1

如果您想要一个非jQuery跨浏览器解决方案，我昨天在这里为某人做了这个：

当您点击button时它会下降，当您再次点击它时会隐藏，或者在文档中不属于下拉列表的任何位置时会隐藏。

只有你需要改变的东西可能是一些很好的样式的CSS东西。

Answer 2

是的，我建议使用jQuery（每次使用JS时）。创建这样的图层真的很容易：

<div id="layer">content</div>
<a id="button" href="#">show</a>
<script type="text/javascript">
$(document)ready(function(){
    $('#layer').hide();
    $('#button').click(function(e){
        e.preventDefault();
        $('#layer').show();
    });
});
</script>

Answer 3

这是一个jsFiddle，展示了如何实现这样的目标。

基本上，你正在捕捉body元素的点击，如果他们点击了设置，你会显示“panel”div。如果他们点击其他内容，则隐藏它。

JS：

$(function() {
    $('body').click(function(e) {
        if ($(e.target).attr('id') == 'settings') {
            $('#panel').show();
        } else {
            $('#panel').hide();
        }
    });
});

HTML：

<span id="settings">Settings</span>
<div id="panel">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

CSS：

#panel { display: none;  border: 1px solid #000;}

如何在gmail中实现“弹出”

3 个答案: