Question

我有一个菜单，包含'搜索'，'过滤'和'排序'。 A＆lt;输入＆gt;当单击“搜索”显示文本字段时，应向右滑动。再次点击“搜索”时，＆lt;输入＆gt;现在应该隐藏。＆lt; span＆gt;旁边也应该向右移动＆lt;输入＆gt;一个空格，隐藏时向左移动。

＆lt;输入＆gt;不要表现得与＆lt; span＆gt;在它的旁边，＆lt;输入＆gt;应该只在用户点击“搜索”时显示。 HTML

<div class="header">
        <span class="search">Search</span>
        <input class="_input"/>
        <span class="tool">Filter</span>
        <span class="tool">Sort</span>
</div>

CSS

input {
}

_input{

}

.tool{
    position: relative;
    padding-left: 10px;
}

JS

$( ".search" ).click(function() {
  $( "._input" ).toggle( "slide" );
});

Here the JSFiddle for reference.

Answer 1

试试这个：为每个style="float:left;"提供span，最后使用css类添加div和style="clear:both;"。

添加以下CSS类 -

.floatLeft {float:left;}

.clear {clear:both;}

._input{
 display:none;
 margin-left:5px;   
}

.tool{
    position: relative;
    padding-left: 10px;
}

修改html -

<div class="header">
    <span class="search floatLeft">Search</span>
    <input class="_input floatLeft" />
    <span class="tool floatLeft">Filter</span>
    <span class="tool floatLeft">Sort</span>
    <div class="clear"></div>
</div>

<强> Working Demo

当<input />向右滑动时滑动下一个内容，当<input />隐藏时向左滑动

1 个答案: