Javascript jquery下拉搜索框，单击图标

它是一个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>

---

不知道您的目标是什么，但您的代码似乎工作正常

你有没有检查过，让你的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>

---

看看这个

需要有关您使用的cdn的更多信息。这里还必须有一些用于创建下拉列表的javascript。请详细说明您的问题标记中有一个错误。虽然我不确定我是否理解你的问题，但你发布的代码应该能达到你期望的效果。你的代码似乎是正确的，你遇到了什么问题？@AdrianForsius我无法在我的文本编辑器中调出它，当我调用它时，它似乎也没有调出。我应该给它一个更合适的名字，请添加类似style=背景色：黄色；像这样连接到searchbar div：并检查您的div是否确实围绕着其他对象。如果你不能使用黄色的div，或者你可以只使用一小行黄色，这意味着你必须把div调大。因为你的代码说你必须按下div内部的按钮才能真正触发javascript。

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