首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用html、css、jquery和php创建以最小化开头的响应表单?

如何使用html、css、jquery和php创建以最小化开头的响应表单?
EN

Stack Overflow用户
提问于 2018-07-18 01:52:32
回答 1查看 52关注 0票数 1

我希望能够最小化和最大化这个容器。

代码语言:javascript
复制
<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:

代码语言: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使我能够最大化文本框,但从那里我不能再次最小化它...我该怎么办?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-18 02:10:59

您的逻辑是倒退的,您说如果它没有panel-collapse,那么就添加removeClass('panel-collapse'),否则添加它。所以它再也不会把它加回去了。应该是:

代码语言:javascript
复制
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');
}

您可能还必须翻转字形图标加/减语句,我没有深入研究,但在进行此更改后,它应该很明显。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51387570

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档