javascript - 隐藏在 li 标签中的 div

Question

我有一个菜单图标。当我单击搜索图标时，会出现一个用于搜索的隐藏输入表单。问题是，当我单击图标时，表单在右侧快速滑动，但图标图像下降且未固定。

这是我在 workers 主题的 function.php 中创建的函数:

<ul class="icone">
    <li><div class="search-lens"><?php get_search_form(); ?></div><a class="search-click" href="#"><img src="image.png"></a></li>
</ul>

这是javascript函数:

jQuery(document).ready(function() {	
    jQuery(".search-click").click(function(){
        jQuery(".search-lens").toggle('fast');
    });

这是自定义的 CSS 代码:

.icone{
    width:15%;
    margin:10px auto;
    position:relative;
}
.icone li{
    width:45px;
    float:left;
    margin-left:10px;
    list-style:none;
}

form.search-form{
    float:left;       
}

div.search-lens {
    display:none;
    float:left;
    margin-left:50px;
}

那么如何避免点击时图标滑落呢？

Answer 1

将你的 .search-lens 设置为“float: right;”您可能还需要将宽度更改为较小的值。