클릭시 클릭 및 두 번째 동작에 대한 첫 번째 동작

Question

애니메이션 된 검색 상자가 입력 버튼을 클릭하면 확장됩니다. 텍스트를 입력하고 아이콘을 두 번 클릭하면 get 메소드로 양식을 보내야합니다.

내가 뭘 잘못하고 있는지 모르겠다. 도움이된다면 행복 할 것이다.

<form action="navi.php" method="GET"> 
    <div class="search-wrapper"> 
     <div class="input-holder"> 
      <input type="text" class="search-input" placeholder="Type to search" /> 
      <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button> 
     </div> 
    </div> 
</form> 

자바 스크립트 함수

function searchToggle(obj, evt){ 
    var container = $(obj).closest('.search-wrapper'); 

    if(!container.hasClass('active')){ 
      container.addClass('active'); 
      evt.preventDefault(); 
    } 
    else if(container.hasClass('active')){ 
      container.removeClass('active'); 
      // clear input 
      container.find('.search-input').val(''); 
      // clear and hide result container when we press close 
      container.find('.result-container').fadeOut(100, function(){$(this).empty();}); 
    } 
} 

Answer 1

이

function searchToggle(obj){ 
 
    var container = $(obj).find('.search-wrapper'); 
 

 
    if(!container.hasClass('active')){ 
 
      container.addClass('active'); 
 
      return false; 
 
    } 
 
    else if(container.hasClass('active')){ 
 
      container.removeClass('active'); 
 
      // clear input 
 
      container.find('.search-input').val(''); 
 
      // clear and hide result container when we press close 
 
      container.find('.result-container').fadeOut(100, function(){$(this).empty();}); 
 
     return true; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="navi.php" method="GET" onsubmit="return searchToggle(this);"> 
 
    <div class="search-wrapper"> 
 
     <div class="input-holder"> 
 
      <input type="text" class="search-input" placeholder="Type to search" /> 
 
      <button class="search-icon" type="submit"><span></span>SUBMIT</button> 
 
     </div> 
 
    </div> 
 
</form>

Answer 2

글쎄, 당신은 당신의 .search-input 빈의 값을 만들고 navi.php에 빈 값을 전송.

그리고 양식을 제출하려면 버튼의 속성이 type="submit"이어야합니다. container.find('.search-input').val('');을 삭제하고 type="submit"을 추가하면 제대로 작동합니다.

else if(container.hasClass('active'))도 의미가 없으며 단지 else 만 사용할 수 있습니다. 그리고 onclick은 사용하지 않는 것이 좋습니다. 당신이 jQuery를 사용하는 경우, 당신은 $ .bind() 또는 $ CSTE 연구진을() ... 사용해야