Simplifying Code for Drop-Down-Box in JQuery and HTML

I'm trying to come up with a way to make a drop down box that is displayed through a jquery mouse hover event and with nested dropdown boxes displayed through hovering over elements of the original drop down box. I wrote some terribly inefficient code and I'm struggling to find ways of simplifying it. If anyone has any suggestions that will help me shorten this code and get a better idea of how to take advantage of functions of JQuery, please help.

here is the link:

http://cs-dev.dreamhosters.com/dropd.php

```
$(document).ready(function(){
$(".tab, .drop").hover(function(){
$(".tab").css("color","#FF7722");
$(".drop").css("display","block");
$("#tv, .droptv").hover(function(){
$(this).css("color","#FF7722");
$(".droptv").css("display","block");
$(".droptv").hover(function(){
$("#tv, .droptv").css("color","#FF7722");
},function(){
$(".droptv").css("color","#005BAB");
});
},function(){
$(this).css("color","#005BAB");
$(".droptv").css("display","none");
});
$("#interact").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#online").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#vod, .dropvod").hover(function(){
$(this).css("color","#FF7722");
$(".dropvod").css("display","block");
$(".dropvod").hover(function(){
$("#dai").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#iguide").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#vod").css("color

Your code is very big and messy so this a bit tricky to really see what you are trying to do. A few obvious things to make the code more readable:

• Replace .css("display","block") with .show()

• Replace .css("display","none") with .hide()

-
You repeat the same color changing hover over and over again. Instead, group all your elements together and specify this function only once:

$("#containo div").hover(function() {

$(this).css("color","#FF7722");

},function() {

$(this).css("color","#005BAB");

});

-
Do not nest hovers inside other hovers. .hover() creates a new event handler when it is called. If you nest them then you each time you move your mouse over the parent, the child is assigned a new event handler. You do not want these duplicates. Instead assign all of your events in the root level.

 

This, plus a little refactoring could reduce your code considerably. Maybe from here the code will be easier to work with so could see how to reduce it further.

$(document).ready(function() {

    function on(selector) {
        $(selector).css("color","#FF7722");
    };
    function off(selector) {
        $(selector).css("color","#005BAB");
    };

    $("#interact,#online,#tablet,#mobile,#dai,#iguide,#tv,.droptv,#vod,.dropvod")
    .hover(function(){
        on(this)
    },function(){
        off(this)
    });

    $("#tv, .droptv").hover(function(){
        $(".droptv").show();
    },function(){
        $(".droptv").hide();
    });

    $("#vod, .dropvod").hover(function(){
        on("#vod");
        $(".dropvod").show();
    },function(){
        off(".dropvod");
        $(".dropvod").hide();
    });

    $(".tab, .drop").hover(function(){
        on(".tab");
        $(".drop").show();
    },function(){
        off(".tab");
        $(".drop").hide();
    });
});

StackExchange Code Review Q#19343, answer score: 4