jquery - ボタンまたはリンクをクリックして、Drop Drew Like Google を開きます

Question

Google検索設定ドロップダウンのようなドロップダウンを見つけようとしています

ここにサンプル画像があります:

私のウェブサイトやこれを構築する方法で使用できるように、そのようなデモはありますか? 基本的な機能主義者が必要です。ボタン/リンクをクリックしてドロップダウンを開きます。Style を与えることができます。私はjqueryが苦手なので、作るのが難しいです。

素晴らしい解決策があれば。

Answer 1

.toggle()これを行うには、歯車をクリックして表示および非表示にする機能を使用します。

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

簡単なデモ (ボックスをクリック)

Answer 2

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

Answer 3

Twitter ブートストラップ ドロップダウン メニューを使用できます。