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

ソン・ジヒョ

(39歳)

ハン・ヒョジュ

(33歳)

ハ・ジウォン

(42歳)

キム・ユジョン

(20歳)

ナム・ジヒョン

(24歳)

ハン・イェリ

(35歳)

パク・シネ

(30歳)

ハン・ジミン

(37歳)

チャン・ナラ

(39歳)

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