как нажимать входную панель на другую сторону?

Question

im not sure, если это возможно, но у меня эти два входных столбца рядом друг с другом. я пытаюсь, чтобы один из баров оставался открытым до тех пор, пока не щелкнул другой, тогда первый закроется, и он останется. У меня есть что-то подобное, используя переход с «автофокусом», но когда вы нажимаете на мой сайт, панель закрывается.

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> 

УС:

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

Answer 1

Ниже приведен пример использования JQuery DEMO

Я изменил .follow-by-email-address «s начальная ширина будет 170 пикселов и удалены input:focus CSS-селектор th ru добавил этот скрипт.

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

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.