带有搜索框的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');
});