Jquery 点击按钮或链接打开Drop溺水，就像谷歌一样

我试图找到一个类似谷歌搜索设置的下拉列表

以下是示例图像：

有没有像这样的演示，我可以用在我的网站或方法来建立这个？我只需要基本的功能，点击按钮/链接打开下拉列表。我可以给你这个款式。我在jquery方面很差，这是一种很难实现的方式

---

如果有什么解决办法，那就太好了

您可以通过使用

.toggle（）

功能在单击档位时显示和隐藏它来完成此操作

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

您可以使用。

试试这个。
**html**
dropxxxxxxx
yyyyyyyyy
zzzzzzz
**css**
#下降{
保证金：自动；
宽度：40px；
高度：30px；
边框：2倍实心；
位置：相对位置；
背景颜色：绿色；
边界半径：4px；
光标：指针；
}
#下拉列表{
位置：绝对位置；
顶部：30px；
右：-1px；
宽度：150px；
高度：100px；
边框：1px实心；
显示：无；
文本对齐：居中；
边界半径：4px；
光标：指针；
}
**剧本**
$（函数（）{
$（'#drop'）。单击（函数（）{
$（“#下拉列表”）.toggle（）；
});
});

您给出的图像路径是blockpage+1表示“落水溺水”：-）这太完美了。我可以修改这个供我使用。非常感谢你能帮我做另一个功能。这是当我点击任何其他地方下拉应该消失。这在任何功能中都是可能的吗？

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