Explication détaillée de l'exemple de code de l'événement Hover pour plusieurs éléments dans jQuery

• 1. ExigencesIntroduction

• Exemple d'étude

• 3. Solution

1. Introduction aux exigences

L'événement hover de jQuery ne concerne qu'un seul élément HTML, par exemple :

$('#login').hover(fun2, fun2);

La fonction fun1 est appelée lorsque la souris entre dans l'élément #login, et la fonction fun2 est appelée lorsque la souris quitte cette API.

Cependant, nous souhaitons parfois que fun1 soit déclenché lorsque la souris entre dans la "zone combinée" de deux éléments ou plus, et que fun2 soit déclenché lorsqu'elle les quitte, tandis que déplacer la souris entre ces éléments ne se déclenche pas. tous les événements. Par exemple, deux éléments HTML sont côte à côte, comme indiqué ci-dessous :

fun1 est déclenché lorsque la souris entre dans la "zone de combinaison" des deux, et fun2 est déclenché lorsque la souris part. Vous pensez peut-être que l'utilisation de la méthode suivante

$('#trigger, #drop'),hover(fun1, fun2);

ne répond pas à nos besoins, car fun2 et fun1 seront déclenchés en séquence lors de la saisie de #drop depuis #trigger. Pour résoudre ce problème, un moyen relativement simple consiste à modifier la structure HTML. L'implémentation est la suivante :

<p id="container">
    <p id="trigger"></p>
    <p id="drop"></p>
</p>

$(&#39;#container&#39;).hover(fun1, fun2);

Cette fonction est réalisée en liant l'événement de survol sur l'élément parent.

2. Exemple d'étude

L'image ci-dessous est un schéma simplifié d'un menu déroulant communLa structure HTML est la suivante :

.

<ul id="#nav">
    <li></li>
    <li></li>
    <li id="droplist">
        <span>下拉菜单</span>
        <ul>
            <li>下拉项1</li>
            <li>下拉项2</li>
            <li>下拉项3</li>
        <ul>
    </li>
    <li></li>
</ul>

Le programme JavaScript implémenté est également très simple

$('#droplist').hover(function(){
    $(this).find('ul').show();
}, function(){
    $(this).find('ul').hide();
});

Cette méthode d'implémentation a une logique claire, mais elle conduit à trop de niveaux de HTML imbriqués et beaucoup de inconvénient lors de l’écriture de CSS. Par exemple :

#nav li { font-size:14px;  }

Nous voulons que ce CSS définisse une police de 14 pixels pour l'élément li du premier calque, mais cela affecte également l'élément du deuxième calque, nous devons donc utiliser l'instruction suivante pour réécrivez-le

#nav li li { font-size:12px; }

3. Solution

Changer la structure HTML

<ul id="#nav">
    <li></li>
    <li></li>
    <li id="trigger">下拉菜单</li>
    <li></li>
</ul>
<ul id="drop">
    <li>下拉项1</li>
    <li>下拉项2</li>
    <li>下拉项3</li>
<ul>

Introduire les fichiers JS dans l'ordre

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mixhover.js"></script>

Code de contrôle

$.mixhover(
    '#trigger', 
    '#drop', 
    function(trg, drop){
        #(drop).show();
    },
    function(trg, drop){
        #(drop).hide();
    }
)

De cette façon, #drop sera affiché lorsque la souris entre dans #trigger, et aucun événement ne sera déclenché lorsque la souris passera de #trigger à #drop. En fait, le #trigger et le #drop. les éléments sont traités comme un seul élément.

Le programme jquery.mixhover.js est le suivant

/**
* Author: http://rainman.cnblogs.com/
 * Date: 2014-06-06
 * Depend: jQuery
 */
$.mixhover = function() {
    // 整理参数 $.mixhover($e1, $e2, handleIn, handleOut)
    var parms;
    var length = arguments.length;
    var handleIn = arguments[length - 2];
    var handleOut = arguments[length - 1];
    if ($.isFunction(handleIn) && $.isFunction(handleOut)) {
        parms = Array.prototype.slice.call(arguments, 0, length - 2);
    } else if ($.isFunction(handleOut)) {
        parms = Array.prototype.slice.call(arguments, 0, length - 1);
        handleIn = arguments[length - 1];
        handleOut = null;
    } else {
        parms = arguments;
        handleIn = null;
        handleOut = null;
    }

    // 整理参数 使得elements依次对应
    var elems = [];
    for (var i = 0, len = parms.length; i < len; i++) {
        elems[i] = [];
        var p = parms[i];
        if (p.constructor === String) {
            p = $(p);
        }
        if (p.constructor === $ || p.constructor === Array) {
            for (var j = 0, size = p.length; j < size; j++) {
                elems[i].push(p[j]);
            }
        } else {
            elems[i].push(p);
        }
    }

    // 绑定Hover事件
    for (var i = 0, len = elems[0].length; i < len; i++) {
        var arr = [];
        for (var j = 0, size = elems.length; j < size; j++) {
            arr.push(elems[j][i]);
        }
        $._mixhover(arr, handleIn, handleOut);
    }
};
$._mixhover = function(elems, handleIn, handleOut) {
    var isIn = false, timer;
    $(elems).hover(function() {
        window.clearTimeout(timer);
        if (isIn === false) {
            handleIn && handleIn.apply(elems, elems);
            isIn = true;
        }
    },
    function() {
        timer = window.setTimeout(function() {
            handleOut && handleOut.apply(elems, elems);
            isIn = false;
        }, 10);
    });
};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!