javascript - 单击时隐藏容器 div

Question

我单击 Click Me! 以显示 #formcontainer div。

我再次点击它来隐藏它，但它没有隐藏:-(

谁能解释一下为什么？

演示: https://jsfiddle.net/v809wxp9/

jQuery(document).ready(function($) {

  // Control Banner toggle on sub pages
  $('#sub-page-banner .tog').click(function() {
    if ($("#formcontainer").hasClass("hassent")) {
      $('#formcontainer').removeClass('hassent');
      $('#topimage').slideDown();
      $('#formcontainer').css('height', '0');
    } else {
      $('#formcontainer').css('height', 'auto');
    }
  });

});

/*SUb Page Banner*/

#sub-page-banner {
  padding: 15px;
  background: #3887c2;
  color: #fff;
  cursor: pointer;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
#sub-page-banner .tog {
  margin-top: 0px !important;
  width: 100%;
  font-size: 13px !important;
  text-align: center;
}
#formcontainer {
  overflow: hidden;
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
  <div class="container-fluid" id="sub-page-banner">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="btn tog">Click me!</div>
        </div>
      </div>
    </div>
  </div>


  <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-8 col-sm-12 topmain">
          <div id="theform">
            <div class="row">

              <div class="col-md-12">
                <h1>Hello - Test my form please :-)</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>

Answer 1

当缺少类时，您不会将类添加回它。

jQuery(document).ready(function($) {

  // Control Banner toggle on sub pages
  $('#sub-page-banner .tog').click(function() {
    if ($("#formcontainer").hasClass("hassent")) {
      $('#formcontainer').removeClass('hassent');
      $('#topimage').slideDown();
      $('#formcontainer').css('height', '0');
    } else {
      $('#formcontainer').addClass('hassent');
      $('#formcontainer').css('height', 'auto');
    }
  });

});

/*SUb Page Banner*/

#sub-page-banner {
  padding: 15px;
  background: #3887c2;
  color: #fff;
  cursor: pointer;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
#sub-page-banner .tog {
  margin-top: 0px !important;
  width: 100%;
  font-size: 13px !important;
  text-align: center;
}
#formcontainer {
  overflow: hidden;
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
  <div class="container-fluid" id="sub-page-banner">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="btn tog">Click me!</div>
        </div>
      </div>
    </div>
  </div>


  <div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-8 col-sm-12 topmain">
          <div id="theform">
            <div class="row">

              <div class="col-md-12">
                <h1>Hello - Test my form please :-)</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>