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！

jquery通过单击图标下拉搜索框

1 个答案: