尝试构建一个切换按钮,使用bootstrap和jquery显示和隐藏div框

问题是我不知道如何取消激活按钮.我可以删除活动的类,它会更新DOM,但它会从bootstrap中的某个地方返回(DOM更改时的Chrome断点显示了堆栈跟踪)

这是我的代码：

var addInputButton = function(id,txt,clk) {
  var btn = $('<a>')
      .text(txt)
      .attr("id",id)
      .addClass("btn")
      .addClass("btn-mini")
      .attr("data-toggle","button")
      //.addClass("btn-info")
      .click(clk);
  $('#input_help_section')
    .append(btn);
  return btn;
};

// CHEATSHEET -----------------
(function() {
  var toggleName = "markdownCheatSheetIsVisible";
  var btnId = "markdownCheatsheetToggleButton";
  var box = $("#markdownCheatsheet");

  var showBox = function() {
    var cheatSheetButton = $('#' + btnId);
    if (!cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
    }
    box.show();
  };

  var hideBox = function() {
    var cheatSheetButton = $('#' + btnId);
    if (cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
    }
    box.hide();
  };

  addInputButton(btnId,"Markdown cheatsheet",function(event) { 
    if ($('#' + btnId).hasClass("active") === false) {
      showBox();
    } else {
      hideBox();
    }
  });

  $("#markdownCheatsheetClose").click(function() {
    hideBox();
  });

  // start shown
  showBox();

})();

这里有一堆奇怪的东西：

>我试图在showBox和hideBox函数中执行addClass(‘active’)和removeClass(‘active’),但是在我删除它之后,在引导程序中的某个地方继续添加活动类.
> toggle方法是在bootstrap中定义的,据我所知,它可以用来切换活动类,但它也隐藏它(某处),我无法将它从活动状态切换出来,我不知道我很明白