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

您可能还需要翻转glyphicon的正/负语句，我并没有深入研究，但是在进行此更改后应该很明显。

如何使用最小化的html，css，jquery和php创建响应表单？

1 个答案: