如何将一个输入栏推开

how to push an input bar out of the way of another?

本文关键字：输入 一个      更新时间：2023-09-26

我不确定这是否可能，但我有这两个相邻的输入栏。我试着让其中一个酒吧一直开着，直到点击另一个，然后第一个酒吧关闭，它也一直开着。我有一些类似的使用"自动对焦"转换的功能，但当你点击我的网站时，栏就会关闭。

如果有人能做到这一点，javascript将非常有效

Fiddle

有什么帮助吗？

HTML:

<div id='Sidebar'>
<div id='SMBar'>
    <div id="input-bars">
        <!-- SEARCH BAR -->
        <div id="SearchBar">
            <form id="tfnewsearch" method="get" action="URL">
                <input type="text" class="search-text-input" placeholder="Search Posts..." name="q" />
            </form>
            <div class="tfclear"></div>
        </div>
        <!-- EMAIL BAR -->
        <div id="FollowByEmail1">
            <form action="URL" method="post" target="popupwindow" onsubmit="window.open('URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                <p>
                    <input autofocus="autofocus" class="follow-by-email-address" placeholder="Updates by Email..." type="text" name="email" />
                </p>
                <input type="hidden" value="" name="uri" />
                <input type="hidden" name="loc" value="en_US" />
            </form>
        </div>
    </div>
</div>

CSS：

#Sidebar {
width: 270px;
border: 1px solid transparent;
height: 500px;
}
#SMBar {
border: 1px solid transparent;
margin: 5px;
height: 405px;
}
#input-bars {
border: 1px solid transparent;
margin: 5px;
height: 30px;
}
input {
height: 25px;
font-size: 14px;
font-family: Play;
padding-left: 30px;
width: 0px;
transition-property: width;
transition-duration: 1s;
background-repeat: no-repeat;
border-radius: 5px;
border: 1px solid black;
outline: none;
box-shadow: 0px 0px 9px #dddddd;
-moz-box-shadow: 0px 0px 9px #dddddd;
-webkit-box-shadow: 0px 0px 9px #dddddd;
}
input:focus {
width: 170px;
box-shadow: 0px 0px 4px #000000;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
}
.follow-by-email-address {
background-image: url(http://imageshack.com/a/img703/8868/iavu.png);
padding-left: 30px;
margin: -12px 0px 0px 2px;
float: left;
}
.search-text-input {
background-image: url(http://imageshack.com/a/img34/9278/cw35.png);
padding-left: 30px;
float: right;
margin: 0px 2px 0px 0px;
}

下面是一个使用jQuery DEMO 的示例

我将.follow-by-email-address的初始宽度更改为170px，并删除了input:focusCSS选择器，然后添加了此脚本。

$(document).ready(function(){
    $('.follow-by-email-address').focus(function(){
        $(this).animate({
            width: 170
        }, 500);
        $('.search-text-input').animate({
            width: 0
        },500);
    });
    $('.search-text-input').focus(function(){
        $(this).animate({
            width: 170
        }, 500);
        $('.follow-by-email-address').animate({
            width: 0
        },500);
    });
});
相关文章：