JQuery Click 함수가 한 번만 작동합니다.

Question

jQuery 클릭 메서드를 사용하여 페이지의 특정 부분을 클릭 한 후 내 섹션의 일부를 표시하거나 숨길 수 있습니다.

내 HTML 코드 :

<section class="apply_section text-center center-block" id="apply_section"> 
     <div class="apply_container"> 

     <div class="container"> 
      <div class="row apply_row"> 

      <div class="col-md-8 apply_form"> 
       <form class="form" action="mail.php" method="POST"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
        <input class="form-control" type="text" placeholder="" required="required" name="firstName"> 
        </div> 

       <div class="col-md-6"> 
        <form class="form"> 
        <div class="form-group"> 
         <textarea class="form-control" placeholder="" required="required" name="message"></textarea> 
        </div> 
        </form> 
        <input class="btn btn-success btn-block" type="submit" value=""></input> 
       </div> 

       </form> 
      </div> 

      <div class="col-md-4 apply_image"> 
       <a><img src="images/icon.png" alt=""></a> 
      </div> 

      </div> 
     </div> 

     </div> 

    </section> 

JQuery와 스크립트 :

$('#apply_section .apply_image a').click(function(){ 
    if($('#apply_section .apply_form').css('display','none')) { 
    $('#apply_section .apply_form').css('display','inline-block'); 
    }else {$('#apply_section .apply_form').css('display','none');} 
}); 

문제는 그 것이다 양식 이미지를 클릭하면 클릭 방법은, 한 시간 동안 주문을 받아 것입니다 나타나지만 그 후에 다시 숨기고 이미지를 클릭해도 작동하지 않으면!

Answer 1

그렇다면 CSS 속성을 확인하는 방법이 아닙니다. jQuery를 토글 문서에 따르면

$('#apply_section .apply_image a').click(function() { 
    var boolean = $('#apply_section .apply_form').css('display') == 'none'; 
     $('#apply_section .apply_form').toggle(boolean) 
}); 

:

$('#apply_section .apply_image a').click(function() { 
    if ($('#apply_section .apply_form').css('display') == 'none') { // Here, check if display value is 'none' 
    $('#apply_section .apply_form').css('display', 'inline-block'); 
    } else { 
    $('#apply_section .apply_form').css('display', 'none'); 
    } 
}); 

Answer 2

또 다른 방법은 사용 토글 그런 일을 할 수 The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Answer 3

더 좋은 방법은 클래스에 토글을 사용하고 있습니다 :

CSS

.hide { 
    display:none; 
} 

jQuery를

$('#apply_section .apply_image a').click(function(){ 
     $('#apply_section .apply_form').toggleClass('hide'); 
}); 

Answer 4

간단하게 코드를 사용하여 토글() :

$('#apply_section .apply_image a').click(function(){ 
    $('#apply_section .apply_form').toggle(); 
});