需求：点击新增按钮的时候，会出现一个新增的输入框，按钮文字新增变成删除，再次点击删除按钮，出现的输入框隐藏，按钮文字变成新增字样。
大致效果是这样的：
为了更好的呈现效果，这里放一个类似的demo。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <style> #scale { background: blue; background-size: 100% 100%; width: 203px; height: 38px; color: #fff; border-radius: 2px; text-align: center; line-height: 35px; } #scroll { width: 140px; height: 20px; display: none; margin-top: 25px; } </style> </head> <body> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="col-md-4 col-sm-4 col-xs-4 control-label"></label> <div class="col-md-7 col-sm-7 col-xs-7"> <div id="scale" style="">新增点位</div> <div id="scroll"> <input type="text" class="single-slider" value="5" /> </div> </div> </div> </div> </div> </body> <script> // 新增删除切换显示 $("#scale").click(function() { var btnVal = $(this).text(); $(this).text(btnVal === '新增点位' ? '删除点位' : '新增点位'); $('#scroll').toggle(); if(btnVal == '删除点位') { $('#scale').css("background", "blue") } else { $('#scale').css("background", "red") } }); </script> </html>
