0

次のフォームがあるとします。

<form action="/orders/add" class="form-horizontal" id="OrderAddForm" method="post">
   <div style="display:none;"><input type="hidden" name="_method" value="POST"></div>         

   <div class="control-group">
      <button type="button" class="btn" id="new-order-line">New order line</button>
   </div>

   <div class="control-group">
      <input class="btn my-hidden" type="submit" value="Save Orderr">       
   </div>
</form>

そして私のCSS：

.my-hidden {
   display: none;
}

そして私のjs：

$(function() {
   $('#new-order-line').click(function() {
     $('.my-hidden').show('slow');
   });
});

したがって、「新しい注文明細」ボタンをクリックするたびに「注文を保存」ボタンを表示したいのですが、「フォーム」要素と「注文を保存」の中にあるため、Twitter Bootstrap が「my-hidden」クラスをオーバーライドしているようです。 ' ボタンは常に表示されます。私は何人かの人々が同じ問題を抱えていると読んだ

ボタンを非表示にする回避策はありますか?

4

1 に答える 1

1

私はこれ自体を問題とは考えていません。Twitter Bootstrap の CSS ルールでは (簡単に) 実行できないかもしれませんが、Twitter Bootstrap がやりたいことを上書きすることが問題である場合は、より具体的な独自のルールをいつでも作成できます。

style="display: none;"インライン スタイルは自動的に最高の特異性を享受するため、属性に追加するのが簡単な方法の 1 つです。

クラスの特異性を高める方法は、セレクターを少し工夫することです。たとえば、これはあなたの例よりも特異性が高いですが、それで十分かどうかはわかりません:

.form-horizontal .control-group .my-hidden { display: none; }

（私はあなたの問題を正しく理解したと思います...そうでない場合は私を怒らせてください;）

于 2013-01-17T20:06:29.353 に答える