Question

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

问题是我不知道如何取消激活按钮。我可以删除更新DOM的类active，但它从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，但是在添加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>

Answer 2

我认为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");

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

2 个答案: