从右侧搜索切换

Question

我正在尝试通过bootstrap从右侧实现简单的搜索切换。我面临的问题是，当双击按钮并且搜索输入很快消失时，会发生单击。

我想要实现的是单击一个按钮，我需要在单击相同按钮时打开和关闭div。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

删除此行

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

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

.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

从你的js中删除$(".search-input-elm").animate({ width: 'toggle' });。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试一次

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个......

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

  }
});