1

我刚刚为网站的菜单制作了这段代码。问题是我很确定它可以简化。

我不知道我是否可以使用开关或其他东西，我只是 Jquery 的初学者....

$(document).ready(function() {

/* Effet hover sur onglet Accueil */
$("#menu-top li a.accueil").mouseover(function() {

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("rightactive");
            $(this).addClass("righthover");
    }

    $("#menu-top li a.accueil")}).mouseout(function(){

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }

    }); 

/* Effet hover sur onglet Entreprise */
$("#menu-top li a.entreprise").mouseover(function() {

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active")))  {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.entreprise")}).mouseout(function(){

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
            $(this).removeClass("lefthover");
            $(this).addClass("leftactive");
    }

    });

/* Effet hover sur onglet Services */
$("#menu-top li a.services").mouseover(function() {

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).addClass("righthover");
        $(this).removeClass("rightactive");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.services")}).mouseout(function(){

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });

/* Effet hover sur onglet Réalisations */
$("#menu-top li a.realisations").mouseover(function() {

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.realisations")}).mouseout(function(){

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });
    });

这是我的html

<nav id="menu-top">
     <ul>
        <li><a href="index.php" class="accueil active">Accueil</a></li>
        <li><a href="entreprise.php" class="entreprise leftactive">Entreprise</a></li>
        <li><a href="services.php" class="services">Services</a></li>
        <li><a href="realisations.php" class="realisations">Réalisations</a></li>
     </ul>
    </nav>

对此的任何帮助将不胜感激。

谢谢。

4

1 回答 1

1

我建议您可以将标签更改为：

<a href="index.php" data-link="accueil" class="active">Accueil</a>

在 javascript 中，您可以有一个名为 rels 的哈希表来放置链接之间的所有复杂依赖项

;(function(){
    var rels = {
        'entreprise': ['entreprise', 'realisations'],
        'services': ['services', 'realisations'],
        ...
    }

    function checkRels(link){
        var other = rels[link];
        for(var i = 0; i < other.length; i++){
            if($('#menu-top li a[data-link="' + other[i] + '"]').is('.active')){
                return false;
            }
        }
        return true;
    }

    $("#menu-top li a").mouseover(function() {
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");
    }).mouseout(function(){
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }); 
}())

当你想改变依赖或添加更多时，你可以简单地调整 rels，而不是改变很多代码。

于 2011-06-29T08:06:13.050 回答