搜索從右側切換

Question

我試圖通過引導從右側實現簡單的搜索切換。我面臨的問題是點擊發生時，雙擊按鈕，搜索輸入即將消失。

我想實現的是點擊一個按鈕，我需要切換一個div打開和關閉點擊同一個按鈕。

https://codepen.io/shahil/pen/XjdYdg

$(".search-btn").click(function() { 
 
\t \t $(".search-input-elm").animate({ width: 'toggle' }); 
 
\t \t $(".search-input-elm").toggle(); 
 
\t });

.search { position:relative; } 
 
.search .search-input-elm { position:absolute; top:10px; right: 37px; display: none; width: 175px;} 
 

 
.search .search-btn {background:transparent;border:0;margin-top: 9px; float:right; } 
 
.search .search-input{ 
 
    width: 100%; 
 
    background: #fff; 
 
    color:#222; 
 
    border: 0; 
 
    padding: 6px 10px; 
 
    border-top-left-radius: 30px; 
 
    border-bottom-left-radius: 30px; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
} 
 
.search-submit { 
 
    position: absolute; 
 
    top: 3px; 
 
    right: 10px; 
 
} 
 
.search .search-btn:focus, header .search .search-input:focus { outline:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="search"> 
 
          <div class="search-wrap"> 
 
           <div class="search-input-elm"> 
 
            <input class="search-input" type="text" placeholder="search.." /> 
 
            <button class="search-submit">></button> 
 
           </div> 
 
           
 
           <button class="search-btn">Search BUTTON</button> 
 
          </div> 
 
         </div>

Answer 1

從您的js中刪除$(".search-input-elm").animate({ width: 'toggle' });。

$(".search-btn").click(function() { 
 
\t \t $(".search-input-elm").animate({ width: 'toggle' }); 
 
\t \t 
 
\t });

.search { position:relative; } 
 
.search .search-input-elm { position:absolute; top:10px; right: 37px; display: none; width: 175px;} 
 

 
.search .search-btn {background:transparent;border:0;margin-top: 9px; float:right; } 
 
.search .search-input{ 
 
    width: 100%; 
 
    background: #fff; 
 
    color:#222; 
 
    border: 0; 
 
    padding: 6px 10px; 
 
    border-top-left-radius: 30px; 
 
    border-bottom-left-radius: 30px; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
} 
 
.search-submit { 
 
    position: absolute; 
 
    top: 3px; 
 
    right: 10px; 
 
} 
 
.search .search-btn:focus, header .search .search-input:focus { outline:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="search"> 
 
          <div class="search-wrap"> 
 
           <div class="search-input-elm"> 
 
            <input class="search-input" type="text" placeholder="search.." /> 
 
            <button class="search-submit">></button> 
 
           </div> 
 
           
 
           <button class="search-btn">Search BUTTON</button> 
 
          </div> 
 
         </div>

Answer 2

刪除此行

$(".search-input-elm").toggle(); 

$(".search-btn").click(function() { 
 
    
 
\t \t $(".search-input-elm").animate({ width: 'toggle' }); 
 
\t \t 
 
\t });

.search { position:relative; } 
 
.search .search-input-elm { position:absolute; top:10px; right: 37px; display: none; width: 175px;} 
 

 
.search .search-btn {background:transparent;border:0;margin-top: 9px; float:right; } 
 
.search .search-input{ 
 
    width: 100%; 
 
    background: #fff; 
 
    color:#222; 
 
    border: 0; 
 
    padding: 6px 10px; 
 
    border-top-left-radius: 30px; 
 
    border-bottom-left-radius: 30px; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
} 
 
.search-submit { 
 
    position: absolute; 
 
    top: 3px; 
 
    right: 10px; 
 
} 
 
.search .search-btn:focus, header .search .search-input:focus { outline:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="search"> 
 
          <div class="search-wrap"> 
 
           <div class="search-input-elm"> 
 
            <input class="search-input" type="text" placeholder="search.." /> 
 
            <button class="search-submit">></button> 
 
           </div> 
 
           
 
           <button class="search-btn">Search BUTTON</button> 
 
          </div> 
 
         </div>

Answer 3

試一次

$(document).ready(function(){ 
 
$('#Search').click(function(){ 
 
$('#inpt').toggleClass('search-field'); 
 
}); 
 
});

.container{ 
 
    position:relative; 
 
    width:100%; 
 
    height:100Vh; 
 
    background:#ccc; 
 
} 
 
.search{ 
 
    float:right; 
 
    width:50px; 
 
    height:50px; 
 
    background:#ff7700; 
 
    text-align:center; 
 
    line-height:40px; 
 
    color:#fff; 
 
    cursor:pointer; 
 
} 
 
.search-field{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <input id="inpt" type="text" class="search-field" style="width:90%; float:left; height:50px;"/> 
 
    <div class="search" id="Search">Search 
 
    </div> 
 
</div>

Answer 4

嘗試......

$(".search-btn").click(function() { 
 

 
    //$(".search-input-elm").toggle(); 
 
    $(".search-input-elm").animate({ 
 
    width: 'toggle', 
 
    display:'block' 
 
    }); 
 
});

.search { 
 
    position: relative; 
 
} 
 
.search .search-input-elm { 
 
    position: absolute; 
 
    top: 6px; 
 
    right: 137px; 
 
    display: none; 
 
    width: 175px; 
 
} 
 
.search .search-btn { 
 

 
    cursor:pointer; 
 
    margin-top: 9px; 
 
    float: right; 
 
} 
 
.search .search-input { 
 
    width: 100%; 
 
    background: #ccc; 
 
    color: #222; 
 
    border: 0; 
 
    padding: 6px 10px; 
 
    border-top-left-radius: 30px; 
 
    border-bottom-left-radius: 30px; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
} 
 
.search-submit { 
 
    position: absolute; 
 
    top: 3px; 
 
    right: 10px; 
 
} 
 
.search .search-btn:focus, 
 
header .search .search-input:focus { 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <div class="search-wrap"> 
 
    <div class="search-input-elm"> 
 
     <input class="search-input" type="text" placeholder="search.." /> 
 
     <button class="search-submit">></button> 
 
    </div> 
 

 
    <button class="search-btn">Search BUTTON</button> 
 
    </div> 
 
</div>

Answer 5

試試這個

$(".search-btn").click(function() { 

if($(".search-input-elm").is(":visible")) { 
    $('.search-input-elm').hide('slide', { 
     direction: 'right' 
    }, 2000); 
} 
else 
{ 
    $('#search-input-elm').show('slide', { 
     direction: 'left' 
    }, 2000); 

    } 
});