jQuery显示/隐藏按钮功能失效，代码问题排查求助

嘿，我一眼就瞅出问题啦！你的按钮点击后没效果，根源在那两个连续的if语句上——咱们来捋一遍逻辑：

当按钮显示"Close Drawer"时，你点击它，代码会先隐藏#topDrawer，紧接着把按钮值改成"Open Drawer"。这时候第二个if的条件就满足了，代码又立刻把抽屉显示回来，还把按钮值改回"Close Drawer"。等于两次操作直接抵消，你自然看不到任何变化！

给你两个修复方案，按需选就行：

方案1：把第二个if改成else if #

这样两个条件只会执行其中一个分支，不会出现抵消的情况，同时我还把重复的$("#closeButton")改成了$(this)，性能更优：

$(document).ready(function() {
  $("#closeButton").click(function() {
    if ($(this).val() === "Close Drawer") {
      $("#topDrawer").hide();
      $(this).val("Open Drawer");
    } else if ($(this).val() === "Open Drawer") {
      $("#topDrawer").show();
      $(this).val("Close Drawer");
    }
  });
});

方案2：用toggle()简化代码（更推荐） #

jQuery自带的toggle()方法可以自动切换元素的显示/隐藏状态，搭配函数式修改按钮文本，代码会简洁很多：

$(document).ready(function() {
  $("#closeButton").click(function() {
    // 自动切换抽屉的显示/隐藏
    $("#topDrawer").toggle();
    // 切换按钮文本
    $(this).val(function(index, currentValue) {
      return currentValue === "Close Drawer" ? "Open Drawer" : "Close Drawer";
    });
  });
});

另外提个小细节：如果你的按钮是用<button>标签写的（比如<button>Close Drawer</button>），那得用text()代替val()来修改按钮文字哦！

内容的提问来源于stack exchange，提问作者mudit Panwar