JQuery HoverIntent untuk konten menu yang tidak bersarang

Saya menggunakan JQuery HoverIntent untuk membuat menu.

Berikut adalah struktur dasar kode HTML saya:

<ul>
    <li><a href="/id#" class="current">Home</a></li>
    <li id="sh-zone-menu-sub-services" class="submenu"><a href="/id#">Services</a></li>
    <li id="sh-zone-menu-sub-support" class="submenu"><a href="/id#">Support</a></li>
    <li id="sh-zone-menu-sub-contact" class="submenu"><a href="/id#">Contact</a></li>
    <li><a href="/id#">About Us</a></li>
</ul>
<div id="sh-zone-menu-sub-services-target" class="submenu-content">Services Content</div>
<div id="sh-zone-menu-sub-support-target" class="submenu-content">Support Content</div>
<div id="sh-zone-menu-sub-contact-target" class="submenu-content">Contact Content</div>

Dan inilah Kode JQuerynya:

var $_ = jQuery;
$_(document).ready(function(){  

    function showSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).addClass("showsubmenu");
        $_("#"+source_id+"-target").show();
    }

    function hideSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).removeClass("showsubmenu");
        $_("#"+source_id+"-target").hide();
    }

    var subMenuConfig = 
    {
        interval: 100,
        sensitivity: 4,
        over: showSubMenu,
        timeout: 300,
        out: hideSubMenu 
    };

    $_("ul li.submenu").hoverIntent(subMenuConfig);
});

Semuanya berfungsi dengan baik, tetapi ketika konten menu terungkap dan saya mencoba mengarahkan kursor ke atasnya, konten tersebut menghilang.

Cara kode HTML dikonfigurasi sebelumnya, DIV konten submenu disarangkan di dalam tag LI, dan ini berfungsi dengan baik yaitu dengan mengarahkan tautan menu dan konten. Namun, saya mengalami masalah dengan penentuan posisi untuk IE (karena konten menu mencakup sebagian besar halaman), jadi saya perlu mengeluarkannya dari tag LI.

Cara saya memilikinya sekarang berfungsi dengan baik untuk IE (dari segi posisi CSS), tetapi hoverIntent tidak berfungsi.

Apakah ada cara untuk menggunakan hoverIntent ketika konten menu saya tidak disarangkan dalam tag LI?!

Terima kasih.


jquery hoverintent
person BannerMan    schedule 07.06.2011    source sumber
comment
Lihat: brandammo.co.uk/blog/2011/02/ ini memberikan contoh lengkap.   -  person John Magnolia    schedule 12.02.2012

Jawaban (1)


arrow_upward
1
arrow_downward

Saya tahu Anda memposting pertanyaan ini beberapa waktu lalu dan saya memiliki pengalaman terbatas dengan plugin hoverIntent, tapi inilah yang saya ketahui dari melihat kodenya. Peristiwa mouseenter dan mouseleave terikat pada objek yang Anda ikat dengan hoverIntent. Kode di hoverIntent yang mengikat objek Anda adalah:

return this.bind('mouseenter', handleHover).bind('mouseleave', handleHover);

Jadi jika Anda meninggalkan ul dan mengikat elemen li, kira-kira seperti ini:

$("ul#ReportNav li").hoverIntent(config);

Setelah popup muncul (menampilkan lebih banyak elemen dari ul), event mouseleave tidak diaktifkan saat Anda mengarahkan kursor ke popup, karena semua elemen di popup adalah turunan dari ul.

Jadi... jika Anda mengatakan... pembungkus div dengan div di dalamnya sebagai pemicu hover, Anda hanya ingin mengikat hoverIntent dengan sintaks yang tepat dan berfungsi dengan baik (semua yang ada di popup adalah anak dari yang di-hover elemen):

<div id="ListContainer">
<div id="ListTableContainer">
<!-- anything you want -->
</div>
</div>

$("div#ListContainer div#ListTableContainer").css({ 'opacity': '0' });
$("div#ListContainer").hoverIntent(config);

Saya sedang mencari sesuatu yang serupa dan terus menemukan pertanyaan ini. Kupikir aku akan menjawabnya.

person Paul Perrick    schedule 06.08.2011