javascript - 如何使用开始最小化的 html、css、jquery 和 php 创建响应表单？

Question

我有一个我希望能够最小化和最大化的容器。

<section class="box-position">
  <div class="containerfoo">
    <div class="  col-xs-12 col-md-3 col-sm-4 pull-right">
      <div class="panel panel-default">
        <!-- Message box title  -->
        <div class="panel-heading top-bar ">
          <div class="col-md-10 col-xs-10">
            <p class="panel-title"><span class="glyphicon glyphicon-comment"></span> Message</p>
          </div>
          <div class="col-md-2 col-xs-2" style="text-align: right;">
            <a href="#"><span class="glyphicon glyphicon-plus icon_minim"></span></a>
          </div>
        </div>
        <!-- Message body   -->
        <div class="panel-body msg_container_base info">
          <form class="contact-form" action="contact-form.php" method="post">
            <div class="form-group">
              <input type="text" class="form-control" id="name" placeholder="Name">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" id="subject" placeholder="Subject">
            </div>
            <div class="form-group">
              <input type="email" class="form-control" id="email" placeholder="Email">
            </div>
            <div class="form-group">
              <textarea type="text" class="form-control" id="message" placeholder="Message..."></textarea>
            </div>
            <div class="form-group">
              <input type="submit" class="form-control" id="submit" value="Send">
            </div>
          </form>
        </div>
      </div>
      <div class="panel-footer">
        <div class="input-group">
        </div>
      </div>
    </div>
  </div>

当我的页面加载时，我希望该元素开始最小化。为此，我为容器提供了 css 样式 .containerfoo .info {display: none}。效果很好，为了能够从那里最大化和最小化我使用了 javascript:

<script>
  $(document).on('click', '.panel-heading span.icon_minim', function(e) {
    var $this = $(this);
    if (!$this.hasClass('panel-collapse')) {
      $this.parents('.panel').find('.panel-body').slideDown();
      $this.removeClass('panel-collapse');
      $this.removeClass('glyphicon-plus').addClass('glyphicon-minus');
    } else {
      $this.parents('.panel').find('.panel-body').slideUp();
      $this.addClass('panel-collapse');
      $this.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    }
  });
</script>

此 javascript 使我能够最大化文本框，但从那里我无法再次最小化它...我该怎么办？

Answer 1

你的逻辑是倒退的，你说如果它没有 panel-collapse 然后 removeClass('panel-collapse')，否则添加它。所以它永远不会把它加回去。应该是:

if ($this.hasClass('panel-collapse')) {
  $this.parents('.panel').find('.panel-body').slideDown();
  $this.removeClass('panel-collapse');
  $this.removeClass('glyphicon-plus').addClass('glyphicon-minus');
} else {
  $this.parents('.panel').find('.panel-body').slideUp();
  $this.addClass('panel-collapse');
  $this.removeClass('glyphicon-minus').addClass('glyphicon-plus');
}

您可能还需要翻转字形加/减语句，我没有深入研究，但进行此更改后应该很明显。