Ako otvárať panel widgetu Accordion cez hover (jQuery)

V tomto článku predstavím jednoduché riešenie, ktoré umožňuje otváranie panelov widgetu Accordion cez event mouseover. K tomuto článku ma inšpiroval príspevok na stránkach Web code geeks, kde je táto funkcia nazývaná Open on Hoverintent. Žiaľ uvedený odkaz už nie je platný a v zdrojovom kóde je daná funkcionalita vytvorená zložito.

Z tohto dôvodu som vytvoril jednoduchý spôsob, ktorý zabezpečí rovnaké správanie.

Príklad: Zápis do elementu <body>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="accordion">
    <h3>Section 1</h3>
    <div>
        1
    </div>
    <h3>Section 2</h3>
    <div>
        2
    </div>
    <h3>Section 3</h3>
    <div>      
        3
    </div>
    <h3>Section 4</h3>
    <div>
        4
    </div>
</div>
<div id="accordion">
    <h3>Section 1</h3>
    <div>
        1
    </div>
    <h3>Section 2</h3>
    <div>
        2
    </div>
    <h3>Section 3</h3>
    <div>      
        3
    </div>
    <h3>Section 4</h3>
    <div>
        4
    </div>
</div>

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
7
8
9
$(document).ready(function () {
    $("#accordion").accordion({
        collapsible : false
    });
    
    $("#accordion .ui-accordion-header").on("mouseover", function(node) {
        $(this).click();
    })                
});
$(document).ready(function () {
    $("#accordion").accordion({
        collapsible : false
    });
    
    $("#accordion .ui-accordion-header").on("mouseover", function(node) {
        $(this).click();
    })                
});

Záver

Ak máte iné zaujímavé riešenie, podeľte sa oň prostredníctvom komentára.

Ako otvárať panel widgetu Accordion cez hover (jQuery)

Záver

Komentáre

Pridať komentár