SOURCE

var mode = 0;
function modeToggle(){
  switch(mode){
    case 0:
      mode = 1;
      $('.commit-bar').css('display','block');
      $('.navbar-bottom-left').html('当前：文字');
      $('.navbar-bottom-right').html('点击提交评论');
      break;
    case 1:
      mode = 0;
      $('.commit-bar').css('display','none');
      $('.navbar-bottom-left').html('当前：语音');
      $('.navbar-bottom-right').html('点击开始录制');
      break;
  }
}

<div class="navbar-bottom">
  <div class="navbar-bottom-left" onclick=modeToggle()>
    当前：语音
  </div>
  <div class="navbar-bottom-right" onclick=UploadCommit()>
    点击开始录制
  </div>
</div>
<div class="commit-bar">
  <input class="commit-input" placeholder="在此输入评论" type="text" />
</div>

.navbar-bottom {
  display: flex;
  color: #fff;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 46px;
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}

.navbar-bottom-left {
  text-align: center;
  color: #a0a0a0;
  flex-grow: 1
}

.navbar-bottom-right {
  text-align: center;
  font-weight: bold;
  flex-grow: 5;
  color: rgb(207, 169, 114);
}
.commit-bar {
  display:none;
  padding:10px 0px;
  width:100%;
  position:fixed;
  bottom:60px;
  height:36px;
  background:#fff;
  left:0;
  text-align:center;
  box-shadow: 0 0 5px #ddd;

}
.commit-input {
  width:90%;
  height:24px;
  border:0;
  border-bottom:1px solid #313131;
  
}