HTMLでQAのリストを開くようにしているが、ホバー〇秒でも開くようにしたい。

HTML、CSS | JavaScript52閲覧

ベストアンサー

1

1人がナイス!しています

(別解1) https://jsfiddle.net/cdz2gk8v/1/ Function.prototype.bindを使うと、thisの内容を固定することができます。jQueryでは$.proxyでも同じことができます。 (別解2) https://jsfiddle.net/cdz2gk8v/2/ アロー関数もthisの参照先を変更しないので、thisの参照先が変わる文脈でも、元のthisがそのまま使えます。 (別解3) https://jsfiddle.net/cdz2gk8v/3/ thisを別な変数に退避しておくというのも、昔から用いられている対処法です。

ThanksImg質問者からのお礼コメント

回答頂いた皆様、ありがとうございました! 詳しい解説や別解まで回答頂き、本当にありがとうございましたorz 昨日からずっと悩んでいたので、涙出そうなくらいうれしいです!うるっと来ました!

お礼日時:10/13 19:28

その他の回答(1件)

0

私は JavaScript を学んだことがないので、もっと単純なことを考えてしまいます。 <details> <summary>●●●●</summary> (クリック時にだけ表示したい内容) </details> 閉じているときには「●●●●」の前に「▶」、開いているときには「▼」が付いて良ければこれが一番単純です。 三角形のマーカーが付いては不都合な場合は、label 要素と input 要素でのアコーディオン・メニューを使います。下はサイド・バーのメニューでの例です。 ● CSS label {display: block; width: 140px; cursor: pointer; padding: 2px 5px; margin-left: 3px; font-weight: bold; border: black solid 2px; border-radius: 5px; font-size: 105%; } input[type="checkbox"] {display: none; width: 140px;} ul.acm-menu {list-style-type: none; width: 140px; margin: 3px 0 3px 0; padding: 0; height: 0; overflow: hidden; transition: height 0.6s;} #acm1:checked + ul {height: auto;} ul.acm-menu li {margin: 5px 5px 5px 15px; padding: 0; line-height: 2em;} ul.acm-menu a {display: block; text-decoration: none; padding: 0;} ● HTML <aside style="width: 160px; margin: auto;"> <label for="acm1"></label> <input type="checkbox" id="acm1"> <ul class="acm-menu"> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> </aside>