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

Question

我试图找到Google搜索设置下拉列表中的下拉菜单

这是示例图像：

有没有这样的演示因此我可以在我的网站或方式中使用它来构建它？我只需要基本的功能主义者，点击按钮/链接打开Drop Down。我可以给出风格。我在jquery中表现不佳，而且发现很难做到这一点。

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

Answer 1

您可以使用.toggle()功能在点击齿轮时显示和隐藏它。

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

Simple demo (click the box)

Answer 2

您可以使用twitter bootstrap drop down menu。

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(); 
    });
});