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

我正在尝试在我的网站中构建一个功能,我有一个切换按钮.当按下按钮时,应显示div,当按钮正常时,div应该是不可见的. div本身也有一个接近的’X’,如果点击,应该使按钮正常(即没有按下)

问题是我不知道如何取消激活按钮.我可以删除活动的类,它会更新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中定义的,据我所知,它可以用来切换活动类,但它也隐藏它(某处),我无法将它从活动状态切换出来,我不知道我很明白

我认为periklis是正确的,你有几个到多个切换修饰符.

我在这里创建了一个jsfiddle.net示例,因为您缺少几个小的html标记以使代码工作.见http://jsfiddle.net/WHXbm/

简而言之,这里有变化：

从addInputButton中删除：

.attr("data-toggle", "button")

从showBox()中删除

if (!cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
}

添加到showBox()

$("#markdownCheatsheetToggleButton").addClass("active");

从hideBox()中删除

if (cheatSheetButton.hasClass("active")) {
      cheatSheetButton.toggle();
      cheatSheetButton.show();
}

添加到hideBox()

$("#markdownCheatsheetToggleButton").removeClass("active");