jQuery通過單擊圖標下拉搜索框

Question

它是一個i標記（圖像是），它使用css通過cdn托管的樣式表顯示圖標，以及如何將其合並。

因此，可以說網頁上有一個放大鏡圖標，我們在用戶單擊該圖標時顯示一個div下拉搜索框。 這就是我要幫助的。 不知道該怎么做，但我知道我已經接近了。 圖標是

<section class="search">
    <div id="searchbar"><i class="search-bar"></i></div>
    <div class="search-dropdown hidden">   
        <div class="searchbox">
        <input placeholder="search..." type="text"/>
    </div>
</div>
</section>

//// javascript /////

 $(document).ready(function(){
    $('#searchbar').click(function(){
        $(this).siblings('.search-dropdown').toggleClass('hidden');
    });
});

Answer 1

不知道您的目標是什么，但是您的代碼似乎有效。

您是否檢查過，以便div環繞圖像，所以當您單擊它時，請在div內單擊（嘗試像我在小提琴中那樣做，在div周圍有一個邊框，這樣您就可以看到）。

否則它應該工作正常。

.hidden類的CSS是什么？

<style>
.hidden
{
background-color: yellow;
}

#searchbar
{
    border: 1px solid black;
    height: 16px;
    width: 50px;
}
</style>

<section class="search">
    <div id="searchbar"><i class="search-bar">CLICK</i></div>
    <div class="search-dropdown hidden">   
        <div class="searchbox">
        <input placeholder="search..." type="text"/>
    </div>
</div>
</section>

腳本：

$(document).ready(function(){
    $('#searchbar').click(function(){
        $(this).siblings('.search-dropdown').toggleClass('hidden');
    });
});

檢查這個jsfiddle ！