2

付属品

各フィールドに関する情報を表示するために、フォームの右側に[?]を追加しました。[?]をクリックした後、小さなボックスに情報を表示したい。どうやってやるの？

前もって感謝します。

4

3 に答える 3

3

あなたの情報が次のような HTML 要素にあるとします。

 <div class="info-box">
      Lorem ipsum dolor sit amet, consectetur adipiscit elit
      Cras in.
 </div>

そして、あなたのCSSには次のようなルールがあります:

 .info-box { display: none; }

次に、jQuery コードは次のようになります。

 jQuery(document).ready(function($){
      $('.help').on('click', function(){
            $('.info-box').show();
      })
 });

実際の HTML を見ていれば、より具体的な回答ができるはずです。おそらく、右上に閉じるボタン (.hide()メソッドで実装します) と、表示する必要がある情報ボックスを見つけるための単純なシステムを含めます。

それまでは、これで正しい軌道に乗るはずです。

編集

あなたのHTMLを考えると、私はこの解決策を提案します:

<div> 次のように、すべてのヘルプ要素をテーブルセル内にラップします。

<div class="help">
    <div class="info-box">
         <a href="#" class="close-button">&times;</a>
         Lorem ipsum dolor sit amet, consectetur adipiscit elit
         Cras in.
    </div>
    <a class='help-button' href='#' title="Click to know more">[?]</a>
</div>

最低限必要な CSS は次のようになります。

.help {
    display:  inline-block;
    position: relative;
}

.info-box {
    width:    150px;
    position: absolute;
    right:    -170px;
}

jQuery コードに関しては、非常に単純になります。

jQuery(document).ready(function($){
  $('.help-button').on('click', function(e){
    e.preventDefault();
    $(this).siblings('.info-box').show();
  });
  
  $('.close-button').on('click', function(e){
    e.preventDefault();
    $(this).parents('.info-box').hide();
  });
});

ここで、より良いスタイルの例を作成しました：

Working example

于 2013-07-26T02:50:45.160 に答える