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

我正试图在我的网站上建立一个功能，我有一个切换按钮。当按下按钮时，div应显示，当按钮正常时，div应不可见。div本身也有一个关闭的“X”，如果单击该按钮，应该使按钮正常（即未按下）

问题是我不知道如何取消激活按钮。我可以删除更新DOM的类

active

，但它从引导程序中的某个地方返回（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();

})();

var addInputButton=函数（id、txt、clk）{
变量btn=$（''）
.text（txt）
.attr（“id”，id）
.addClass（“btn”）
.addClass（“btn迷你版”）
.attr（“数据切换”、“按钮”）
//.addClass（“btn信息”）
。单击（时钟）；
$（“#输入_帮助_部分”）
.附加（btn）；
返回btn；
};
//备忘单-----------------
（功能（）{
var toggleName=“markdownhetsheetisvisible”；
var btnId=“markdownscheatsheettogglebutton”；
变量框=$（“#降价备忘单”）；
var showBox=函数（）{
var cheatSheetButton=$（“#”+btnId）；
如果（！cheatSheetButton.hasClass（“活动”））{
cheatSheetButton.toggle（）；
cheatSheetButton.show（）；
}
box.show（）；
};
var hideBox=函数（）{
var cheatSheetButton=$（“#”+btnId）；
if（cheatSheetButton.hasClass（“活动”））{
cheatSheetButton.toggle（）；
cheatSheetButton.show（）；
}
box.hide（）；
};
addInputButton（btnId，“降价备忘单”，函数（事件）{
if（$（'#'+btnId）.hasClass（“活动”）==false）{
陈列柜（）；
}否则{
营养不良（）；
}
});
$（“#MarkdownSheetClose”）。单击（函数（）{
营养不良（）；
});
//开始显示
陈列柜（）；
})();

这里有很多奇怪的事情：

• 我试图在

  showBox

  和

  hideBox

  函数中执行

  addClass（'active'）

  和

  removeClass（'active'）

  ，但在我移除

  活动的
  类后，引导程序中的某个触发器继续将其添加回去

• toggle

  方法是在bootstrap中定义的，据我所知，它是用来切换

  active

  类的，但它也隐藏了它（在某个地方），我不能将它从一个active状态中切换出来，我不太明白这一点

---

我认为佩里克利斯的观点是正确的，你有几个到多个切换修饰符

我在这里创建了一个jsfiddle.net示例，因为您缺少几个小的html标记来让代码正常工作。看

简言之，以下是变化：

从addInputButton中删除：

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

从showBox（）中删除

添加到showBox（）中

从hideBox（）中删除

添加到hideBox（）中

---

我找到了一个不需要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>

详细信息详细信息

toggle（）函数没有文档记录，您可能是指.button（'toggle'）？此外，由于要显式切换，可能需要删除.attr（“数据切换”，“按钮”），这样大家都知道，这确实需要javascript。它只是对你隐瞒了这个事实。如果您需要不支持js，那么它将使用Bootstrap中的默认Javascript。谢谢你的澄清

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

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

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

<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>