Question

我正在尝试使用jQuery click方法在单击页面的某个部分后显示和隐藏部分部分。

我的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属性的方式。

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

使用切换的另一种方式：

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

根据Jquery切换文档： 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

使用toggle（）简化代码：

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

JQuery Click Function只工作一次

4 个答案: