6/12/2021

jQuery Script

Blogger管理ページの[テーマ]-{カストマイズ}-[HTMLの編集]で、追加修正スタイルとjQueryスクリプトを追加した。これにより投稿でjquery UIを記述できる。ここでは、<DL><DT><DD>タグを使ったトグルの例などを示す。▶の項目はHTML5 <details>を使った例である。

toggle

この部分が表示
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(function () { $('.toggle').hover(function() {$(this).next('div').toggle(); },
 function(){ $(this).next('div').hide(); }); });</script>
<style>.toggle { cursor:default; } .hide { display: none; }</style>
<h3 class="toggle">toggle</h3>
<div class="hide">この部分が表示</div>
予告編

格子配置.grid
CSS3 tooltips <i class="tool">項目<i class="tips">説明</i></i>

　項目1 項目にカーソルを重ねるとここが表示 　項目2 同じ段落に二つ以上書けるようにした。 　項目3テキストの説明

JSカーソルを重ねると表示※スマホではクリック 
<script> $(function () { $('dl#toggle dt').hover(function() {$(this).next('dd').toggle(500); }, function(){ $(this).next('dd').toggle(500); }); });</script>
<dl id="toggle">
    <dt>項目1</dt>　<dd>説明１</dd>
    <dt>項目2</dt>　<dd>説明２</dd>
</dl>
項目1 - DT要素にカーソルを重ねるとDD要素が表示
項目2 - 再度重ねると非表示
説明2
ラベル：