HTMLはこのサンプルと同じように実装されていると仮定します。
アコーディオン周りの処理はなるべくサンプルと同じにしています。
また
そして自動再生中であってもマウスオーバーもしくはマウスクリックで閉開するようにしたいです。
とのことですので、アコーディオンの開閉イベントにmouseenterを追加しています。
javascript
1$(function(){
2
3 // サンプルと同じ
4 $('.accordion p').click(function(){
5 $(this).next('ul').slideToggle();
6 $(this).children('span').toggleClass('open');
7
8 });
9
10 // クリックまたはマウスオーバーでアコーディオン処理
11 // clickだけでなくmouseenterにもバインドしている。
12 $('.accordion dt').on('click mouseenter', function() {
13 // 処理はサンプルと同じ
14 $(this).next('dd').slideToggle();
15 $(this).next('dd').siblings('dd').slideUp();
16 $(this).toggleClass('open');
17 $(this).siblings('dt').removeClass('open');
18 });
19
20 // メニューがマウスオーバーされているかを監視するフラグ
21 var isActive = false;
22 $('dl.accordion').on('mouseenter', function() {
23 // マウスオーバーされている場合はtrue
24 isActive = true;
25 }).on('mouseleave', function() {
26 // マウスが離れている場合はfalse
27 isActive = false;
28 });
29
30 // ループでアコーディオンを動作させる処理
31 (function loop($menu) {
32 // 次に開くメニュー
33 var $next = $menu;
34 // マウスが離れている場合のみ実行
35 if(!isActive) {
36 // 次に開くメニューがない場合は最初のメニューを指定
37 if(!($menu instanceof jQuery) || !$menu.length) {
38 $menu = $('.accordion dt').first();
39 }
40 // アコーディオンのイベントを実行
41 $menu.trigger('click');
42 // 次に開くメニューを取得
43 $next = $menu.nextAll('.accordion dt').first();
44 }
45 // loop関数に$nextを渡す
46 setTimeout(loop, 3000, $next);
47 })();
48});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/20 04:03 編集