3

I am trying to build a feature into my site where I have a toggle button. When the button is depressed a div should show and when the button is normal, the div should be invisible. There is also a close 'X' on the div itself, which, if clicked, should make the button normal (ie not depressed)

The problem is that I don't know how to un-activate the button. I can remove the class active, which updates the DOM, but it comes back from somewhere within bootstrap (Chrome breakpoint on DOM change showed me a stack trace)

Here is my code:

  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();

})();

There are a bunch of odd things here:

  • I tried to do addClass('active') and removeClass('active') in the showBox and hideBox functions, but a trigger somewhere in bootstrap kept on adding the active class back after I removed it.
  • The toggle method is defined in bootstrap and as far as I can figure it out is meant to toggle the active class, but it also hides it (somewhere) and I can't toggle it away from an active state, which I don't quite understand.
4

2 回答 2

28

我找到了一个不需要 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>
于 2013-05-02T11:19:02.597 回答
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");
于 2012-05-31T20:57:57.937 回答