单击时隐藏容器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>

Answer 2

您必须在其他条件中添加以下行：

$("#formcontainer").addClass('hassent');

Answer 3

您只是在点击时删除了该类。然后使用类$('#formcontainer').addClass('hassent');添加语句。它返回原始位置。

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');
                $('#topimage').slideUp();
                $('#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 4

＆＃13;

＆＃13;

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

});

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

添加您删除的课程

Answer 5

使用toggle（）函数

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');
   // }
    $('#formcontainer').toggle();
  });

});

/*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 {
  display:none;
}

<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 6

请参阅以下代码，只需添加$('#formcontainer').addClass('hassent');

即可

＆＃13;

＆＃13;

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

});

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;