如何使用html、css、jquery和php创建以最小化开头的响应表单？
如何使用html、css、jquery和php创建以最小化开头的响应表单？
提问于 2018-07-18 01:52:32
我希望能够最小化和最大化这个容器。
<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使我能够最大化文本框，但从那里我不能再次最小化它...我该怎么办？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-18 02:10:59
您的逻辑是倒退的，您说如果它没有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');
}您可能还必须翻转字形图标加/减语句，我没有深入研究，但在进行此更改后，它应该很明显。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51387570
复制相关文章
相似问题
腾讯云开发者
