基于bootstrap的 按钮-隐藏 案例

实现的效果:

应用于修改昵称,单击修改变成下面的界面并隐藏修改按钮,按取消会恢复

代码:

						<div class="row">
							<div class="col-sm-2">昵称：${SESSION_USER.alias }</div>
							<div id="demo" class="collapse col-sm-4">
								<input type="text" id="newnc">
								<button οnclick="changenc()">确定</button>
								<button href="#demo" data-toggle="collapse" οnclick="huifu()">取消</button>
							</div>
							<div class=" col-sm-2">
								<a href="#demo" data-toggle="collapse">
									<button  class="bt">修改</button>
								</a>
							</div>
						</div>

js:

		$(function() {		
			$(".bt").click(function(){
       	  		$(".bt").hide();
     		 });
		});
   
	   function huifu(){
	   	 $(".bt").show();
	   }
	  
	   function changenc(){//点击确定的代码,修改昵称后刷新本页面
	   	var newnc = document.getElementById("newnc").value;
	   	$.post(' ${cp}/user/changenc',  {newnc:newnc}, function(data) {
				if (data.code == 1) {
					window.location.href = '${cp}/home';
				} else {
					show(data.msg);
				}
			});
	   }