サポート » プラグイン » 「shortcodes ultimate」のアコーディオンを、クリックでなくホバーで開かせたい

  • タイトルのとおりです。
    よろしくお願いいたしますm(__)m

    プラグイン「shortcodes ultimate」を使っています。
    アコーディオンをショートコードで埋め込むことができるのですが、その開き方を変えたいです。
    デフォルトではクリックすると中身が開くのですが、それをホバーで開くようにできればと思っています。

    こちらが元のコードです。()

    jQuery(document).ready(function ($) {
    
    	// Spoiler
    	$('body:not(.su-other-shortcodes-loaded)').on('click', '.su-spoiler-title', function (e) {
    		var $title = $(this),
    			$spoiler = $title.parent(),
    			bar = ($('#wpadminbar').length > 0) ? 28 : 0;
    		// Open/close spoiler
    		$spoiler.toggleClass('su-spoiler-closed');
    		// Close other spoilers in accordion
    		$spoiler.parent('.su-accordion').children('.su-spoiler').not($spoiler).addClass('su-spoiler-closed');
    		// Scroll in spoiler in accordion
    		if ($(window).scrollTop() > $title.offset().top) $(window).scrollTop($title.offset().top - $title.height() - bar);
    		e.preventDefault();
    	});
    	$('.su-spoiler-content').removeAttr('style');
    	// Tabs
    	$('body:not(.su-other-shortcodes-loaded)').on('click', '.su-tabs-nav span', function (e) {
    		var $tab = $(this),
    			data = $tab.data(),
    			index = $tab.index(),
    			is_disabled = $tab.hasClass('su-tabs-disabled'),
    			$tabs = $tab.parent('.su-tabs-nav').children('span'),
    			$panes = $tab.parents('.su-tabs').find('.su-tabs-pane'),
    			$gmaps = $panes.eq(index).find('.su-gmap:not(.su-gmap-reloaded)');
    		// Check tab is not disabled
    		if (is_disabled) return false;
    		// Hide all panes, show selected pane
    		$panes.hide().eq(index).show();
    		// Disable all tabs, enable selected tab
    		$tabs.removeClass('su-tabs-current').eq(index).addClass('su-tabs-current');
    		// Reload gmaps
    		if ($gmaps.length > 0) $gmaps.each(function () {
    			var $iframe = $(this).find('iframe:first');
    			$(this).addClass('su-gmap-reloaded');
    			$iframe.attr('src', $iframe.attr('src'));
    		});
    		// Set height for vertical tabs
    		tabs_height();
    		// Open specified url
    		if (data.url !== '') {
    			if (data.target === 'self') window.location = data.url;
    			else if (data.target === 'blank') window.open(data.url);
    		}
    		e.preventDefault();
    	});
    
    	// Activate tabs
    	$('.su-tabs').each(function () {
    		var active = parseInt($(this).data('active')) - 1;
    		$(this).children('.su-tabs-nav').children('span').eq(active).trigger('click');
    		tabs_height();
    	});

    ちなみに、clickと書かれてある3か所をhoverに変えたら見事ホバーになりました。
    が、あと一歩できないんです。

    どういうことかといいますと、

    まず、「スポイラーのタイトルをホバーすると中身が開いた」というところまではいいのです。
    そのとき、中身をクリックしようとして「マウスをタイトルから中身に移動させる」じゃないですか。
    すると、「ホバーが解除されて閉じてしまう」のです…(´;ω;`)

    いったい、どうすればいいのでしょうか…
    ご教示いただければ幸いです。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • meijinochocoさん、こんばんは。
    ご希望の回答ではなくて恐縮なのですが、ちょっと見方を変えて、CSSで対応するのはいかがでしょうか?

    http://ri-mode.com/rainbow/2014/11/20/css_accordion_menu-2/

    Bootstrap accordion open on hover
    Queryのmouseoverメソッドとmouseenterメソッドの違い

    理屈はmouseoverしたときに、click(trigger('click')とか?)発動してやるってことじゃないですかね。
    対象となる要素やどこ書き換えてやるかはわかりませんが。

    ただsu-tabsはよそでもつかってるかもしれないので、そっちの動作はどうなるんだろう。

    トピック投稿者 meijinochoco

    (@meijinochoco)

    so-taroさん
    CSSでやった方がいいのかもしれませんね。
    どうもありがとうとうございます。

    oisit
    ヒントをありがとうとうございます。
    素人すぎて難しそうです。勉強してみます。

    さらに調べてみた。
    jQueryのonという関数についての参考ページ。
    jQueryの.on()で使えるイベントの種類と記述例
    実践、jQuery 第1回 .on()と.off()を使いこなす 1

    イベントにclickの代わりにmouseenter指定してやるんですかね。
    一応試してみましたが、スレ主さんの悩みは解決するのではないかと。
    ただ2回タイトルにマウス持っていくと閉じてしまう。
    ちなみに書き変えるのは最初のSpoilerというコメント以下の1か所でいいのでは。
    あとの2つはtab切り替えの時のコードの様ですね。

    それとじかに変えるとアップデートのたびに修正が必要ですので、何かいい方法を考える必要があるかも。

    トピック投稿者 meijinochoco

    (@meijinochoco)

    oisitさん

    せっかくお調べ頂いたのに、お返事遅くなってしまいました。
    大変失礼いたしました。<m(__)m>

    clickの代わりにmouseenterとは…
    こんなこと、いったい誰が知ってるんでしょうか…笑

    ありがとうございました!

    トピック投稿者 meijinochoco

    (@meijinochoco)

    so-taroさん、oisitさん

    おかげさまで解決いたしました。

    今回はアップデートの問題などもありますので、
    so-taroさんのCSS作戦を採用させていただきました。

    それでは。お二人とも、誠にありがとうございます。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「「shortcodes ultimate」のアコーディオンを、クリックでなくホバーで開かせたい」には新たに返信することはできません。