3

トグルボタンがあるサイトに機能を構築しようとしています。ボタンを押すと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();

})();

ここには奇妙なことがたくさんあります：

  • and関数で実行しようとしaddClass('active')ましremoveClass('active')たが、ブートストラップのどこかにあるトリガーが、クラスを削除した後もクラスを追加し続けました。showBoxhideBoxactive
  • メソッドはtoggleブートストラップで定義されており、私が理解できる限り、activeクラスを切り替えることを目的としていますが、（どこかで）それを非表示にし、アクティブ状態から切り替えることはできません。これはよくわかりません。 。
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は、いくつかから多くのトグル修飾子を持っていたので、順調に進んでいたと思います。

コードを機能させるための小さなhtmlタグがいくつか欠落しているため、ここでjsfiddle.netの例を作成しました。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();
}

hiddenBox（）に追加

$("#markdownCheatsheetToggleButton").removeClass("active");
于 2012-05-31T20:57:57.937 に答える