Explication détaillée de l'exemple de code de l'événement Hover pour plusieurs éléments dans jQuery-js tutoriel-php.cn

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

黄舟

Libérer： 2017-06-26 11:17:47

original

1490 Les gens l'ont consulté

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 :

$(&#39;#login&#39;).hover(fun2, fun2);

Copier après la connexion

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

$(&#39;#trigger, #drop&#39;),hover(fun1, fun2);

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

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;  }

Copier après la connexion

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; }

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Code de contrôle

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

Copier après la connexion

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);
    });
};

Copier après la connexion

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!