jquery - 点击按钮或链接打开 Drop Drown Like Google

Question

我试图找到像 Google Search Setting Drop Down 这样的下拉菜单

这是示例图像：

是否有任何类似的演示以便我可以在我的网站中使用或构建它的方式？我只需要基本的功能主义者，点击按钮/链接打开下拉。我可以给 Style 。我在 jquery 中很糟糕，这就是很难做到的方式。

如果有任何解决方案会很棒。

Answer 1

您可以通过使用该.toggle()功能在单击齿轮时显示和隐藏它来做到这一点。

$(function(){
    $('#gear').click(function(){
       $('#dropdown').toggle(); 
    });
});

简单演示（单击框）

Answer 2

您可以使用twitter bootstrap 下拉菜单。

Answer 3

try this.

**html**
<div id="drop">drop<div id="dropdown"><a>xxxxxxx</a><hr/><a>yyyyyyyy</a><hr/><a>zzzzzzz</a></div></div>

**css**

#drop {
    margin: auto;
    width: 40px;
    height: 30px;
    border: 2px solid ;
    position: relative;
   background-color:green;
    border-radius:4px;
    cursor:pointer;
    }

#dropdown {
    position:absolute;
    top: 30px;
    right: -1px;
    width: 150px;
    height: 100px;
    border: 1px solid;
    display: none;
    text-align:center;
     border-radius:4px;
    cursor:pointer;
}

**script**

$(function(){
    $('#drop').click(function(){
       $('#dropdown').toggle(); 
    });
});