基于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 onclick="changenc()">确定</button><button href="#demo" data-toggle="collapse" onclick="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);}});   }