Question

它是一个i标签（图像是），它使用css通过cdn托管样式表显示图标，以及如何合并它。

因此，假设网页上有一个放大镜图标，我们用户点击图标，会出现一个div下拉搜索框。这就是我要求的帮助。不知道怎么做，但我知道我很接近。图标无法点击。

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


<section class="search">
<div id="icon"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">   

    <input placeholder="search..." type="text"/>

</div>

</section>

.hidden
{
background-color: yellow;
display: none; 
}

#icon: 
{
border: 1px solid black;
height: 16px;
width: 50px;
}

http://jsfiddle.net/rk12aa5g/2/这是不起作用的代码。

Answer 1

在这里看看它有效吗

<style>
.hidden {
background-color: yellow;
display: none;
}
#icon: {
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="icon"><i class="search-bar">CLICK</i>
</div>
<div class="search-dropdown hidden">
    <input placeholder="search..." type="text" />
</div>
</section>
<script>
$(document).ready(function () {
$('#icon').click(function () {
    $(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
</script>

http://jsfiddle.net/sanoj908572/n3a52sa4/

通过单击图标显示搜索框的Jquery下拉菜单

1 个答案: