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

Question

我正在尝试在我的网站中构建一个功能，其中有一个切换按钮。当按钮按下时，div 应该显示，当按钮正常时，div 应该不可见。 div 本身上还有一个关闭的“X”，如果单击该“X”，应该会使按钮正常(即不按下)

问题是我不知道如何取消激活该按钮。我可以删除类(class) active ，它更新了 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();

})();

这里有很多奇怪的事情:

• 我尝试做addClass('active')和removeClass('active')在 showBox和hideBox功能，但 Bootstrap 中某处的触发器不断添加 active删除后重新上课。
• toggle方法是在 bootstrap 中定义的，据我所知，它是为了切换 active类，但它也隐藏了它(在某个地方)，并且我无法将其从事件状态切换开，我不太明白。

Answer 1

我找到了一个不需要 JavaScript 的解决方案:

<div class="btn-group" data-toggle="buttons-checkbox">
    <a class="btn collapse-data-btn" data-toggle="collapse" href="#details">Show details</a>
</div>
<div id="details" class="collapse">
    <p>Details details details details details details details details...</p>
</div>