jquery可点击图标下拉div，里面有一个搜索框

Question

想象一下，点击它时会出现一个图标，会出现一个div，其下方有一个搜索框。我怎么能做到这样的事情？问题是能够让图标有一个下拉div。

<div class="searchbox">
<input placeholder="search..." type="text" /></div>
<select name="icon" class="default" tabindex="20">
<option value="">  </option> 

<option value=""> </option>
</select>

Answer 1

愿这个光荣的图标下拉破坏你想象力的极限，并为这个搜索栏的用户带来极大的兴奋。

http://jsfiddle.net/5udptx82/

HTML

<section class="fantastic-wrapper">
    <div id="glorious-icon"></div>
    <div class="glorious-dropdown hidden">
        <div class="searchbox">
            <input placeholder="search..." type="text" />
        </div>
    </div>
</section>

CSS

#glorious-icon:before {
    content:'☃';
}
.hidden {
    display:none;
}

JS（jQuery）

$('#glorious-icon').click( function() {
    $(this).siblings('.glorious-dropdown').toggleClass('hidden');
});