如何抓住小组闭幕活动

时间:2016-03-12 01:52:05

标签: javascript twitter-bootstrap-3



$(document).ready(function(){
		$('#hide').on('click', function (e) {
			$('#current-pane).show()
		});
	});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group">
	<div class="panel panel-default" id="current-pane">
      This is First Panel
      <a href="#current-pane" class="btn btn-primary btn-lg" data-dismiss="alert" aria-label="close" id="hide">Finish Call</a>
    </div>
  
  	<div class="panel panel-info hide" id="current-pane">
      Show me on close of first one
    </div>
  </div>
&#13;
&#13;
&#13;

我的要求是在完成所有操作后关闭div并显示选择其他操作的其他div。

因此我认为bootstrap面板组件会有所帮助。请不要我不是在寻找崩溃效应。我希望以某种动画方式进行,以便给人留下工作div关闭的印象。

我正在努力寻找小组关闭事件。

1 个答案:

答案 0 :(得分:0)

div id必须是唯一的,例如current-pane1current-pane2等。

&#13;
&#13;
$(document).ready(function(){
		$('#hide').on('click', function (e) {
			$('#current-pane1').slideToggle();
			$('#current-pane2').removeClass("hide");
		});
	});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group">
	<div class="panel panel-default" id="current-pane1">
      This is First Panel
      <a class="btn btn-primary btn-lg" data-dismiss="alert" aria-label="close" id="hide">Finish Call</a>
    </div>
  
  	<div class="panel panel-info hide" id="current-pane2">
      Show me on close of first one
    </div>
  </div>
&#13;
&#13;
&#13;