javascript - 如何将输入栏推开？

林不知道这是否可能，但我有这两个输入栏彼此相邻。我试图让其中一个酒吧保持打开状态，直到单击另一个，然后第一个酒吧关闭并且它也保持打开状态。使用“自动对焦”过渡时，我也有类似的操作，但是当您单击我的网站时，该栏会关闭。

如果有人可以使用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:focus CSS选择器，然后添加了此脚本。

$(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);
    });
});

关于javascript - 如何将输入栏推开？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20554400/