Javascript JQuery Click函数只工作一次

我试图使用jqueryclick方法在单击页面的某个部分后显示和隐藏部分分区

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

---

问题是，单击方法只执行了一次命令，如果我单击图像，表单将出现，但在这之后，如果我需要再次隐藏它，并且单击图像不起作用

这不是检查css属性的方式

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

---

使用切换的另一种方法：

 $('#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(){
    $('#apply_section .apply_form').toggle();
});

根据Jquery切换文档：

---

通过更改CSS显示属性，匹配的元素将立即显示或隐藏，无需动画。如果元素最初显示，它将被隐藏；如果隐藏，它将显示。显示特性将根据需要进行保存和还原。如果某个元素的显示值为inline，则隐藏并显示后，它将再次以内联方式显示。

执行类似操作的更好方法是使用类切换：

CSS

jQuery

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

---

使用切换简化代码：

 $('#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(){
    $('#apply_section .apply_form').toggle();
});

---

与其使用if$'apply\u section.apply\u form.css'display'，'none'代替if$'apply\u section.apply\u form.css'display'=='none'，更好的方法是使用jquery.toggle函数。。。。或者创建一个类并使用Thank@kartikeya Khosta，它成功了。多么愚蠢的错误：所以我会试试你建议的另一个选择。犯这样的错误真是太遗憾了！：D在@Oen44中做了很多工作。当OP使用内联块时，toggle返回display:block。@Oen44-主要目的是隐藏或显示元素。不是吗？但是块和内联块显示之间存在差异，这可能会影响页面外观。@Oen44:根据Jquery文档：通过更改CSS显示属性，匹配的元素将立即显示或隐藏，而不会显示动画。如果元素最初显示，它将被隐藏；如果隐藏，它将显示。显示特性将根据需要进行保存和还原。如果某个元素的显示值为inline，则该元素被隐藏并显示，它将再次以内联方式显示。@Oen44:没问题！我们是来帮忙的！不包含标签css，OP没有提到使用css，不要发布与OP问题无关的答案。