如何將輸入欄從另一個位置移開？

即時通訊不知道這是可能的，但我有這兩個輸入欄相鄰。我試圖讓其中一個酒吧保持打開狀態，直到另一個酒吧點擊，然後第一個酒吧關閉，並保持不變。我有類似的使用「自動對焦」過渡，但當你點擊我的網站時，酒吧關閉。如何將輸入欄從另一個位置移開？

的JavaScript將工作的偉大，如果任何人都可以做到這一點

任何幫助嗎？

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; 
}

來源

2013-12-12 trade2day1

那將是非常做，能夠用JavaScript，但我認爲元素必須是爲了使用CSS的兄弟姐妹alone->參見[一般兄弟選擇（https://developer.mozilla.org/EN-US /文檔/網絡/ CSS/General_sibling_selectors）。在這裏使用JavaScript的一個選項？ – Schmalzy

[這是儘可能接近我只能使用CSS]（http://jsfiddle.net/nJh99/1/） – Schmalzy

謝謝..當我加入

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

如何將輸入欄從另一個位置移開？

回答

相關問題