Is there any way to decrease this script without losing functionality?

Question

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script>
    $("div#contenthead div.left span").hover(function() {
        $("div#contenthead div.topmenu").addClass("displayblock");});

    $("div#contenthead div.left span.cursos").hover(function() {
        $("div#contenthead div.topmenu ul.cursos").addClass("displayblock");
        $("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});

    $("div#contenthead div.left span.atendimento").hover(function() {
        $("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.atendimento").addClass("displayblock");
        $("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});

    $("div#contenthead div.left span.acaosocial").hover(function() {
        $("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.acaosocial").addClass("displayblock");
        $("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});

    $("div#contenthead div.left span.calendario").hover(function() {
        $("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.calendario").addClass("displayblock");});

    $("div#contenthead div.right span.login").hover(function() {
        $("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
        $("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});

    $("div#contenthead div.left span.cursos").hover(function() {
        $("div#contenthead div.left span.cursos").addClass("colorblue");
        $("div#contenthead div.left span.atendimento").removeClass("colorblue");
        $("div#contenthead div.left span.acaosocial").removeClass("colorblue");
        $("div#contenthead div.left span.calendario").removeClass("colorblue");});

    $("div#contenthead div.left span.atendimento").hover(function() {
        $("div#contenthead div.left span.cursos").removeClass("colorblue");
        $("div#contenthead div.left span.atendimento").addClass("colorblue");
        $("div#contenthead div.left span.acaosocial").removeClass("colorblue");
        $("div#contenthead div.left span.calendario").removeClass("colorblue");});

    $("div#contenthead div.left span.acaosocial").hover(function() {
        $("div#contenthead div.left span.cursos").removeClass("colorblue");
        $("div#contenthead div.left span.atendimento").removeClass("colorblue");
        $("div#contenthead div.left span.acaosocial").addClass("colorblue");
        $("div#contenthead div.left span.calendario").removeClass("colorblue");});

    $("div#contenthead div.left span.calendario").hover(function() {
        $("div#contenthead div.left span.cursos").removeClass("colorblue");
        $("div#contenthead div.left span.atendimento").removeClass("colorblue");
        $("div#contenthead div.left span.acaosocial").removeClass("colorblue");
        $("div#contenthead div.left span.calendario").addClass("colorblue");});

    $("div#contenthead div.right span.login").hover(function() {
        $("div#contenthead div.left span.cursos").removeClass("colorblue");
        $("div#contenthead div.left span.atendimento").removeClass("colorblue");
        $("div#contenthead div.left span.acaosocial").removeClass("colorblue");
        $("div#contenthead div.left span.calendario").removeClass("colorblue");});
</script>

It serves to display elements outside the parent div using hovers in distinct elements changing color and visibility.

Regarding size, @fernandomondo’s solution is the best, it makes the script very small and simple to edit, very useful, but @tobymosque touched on a subject that I am very valuable, weight for the end user, even if his is bigger, which of the two would be lighter? has some way of calculating script weight?

Answer 1

Simple solution with CSS only:

Implement a CSS class containing the desired definitions in the pseudo-class hover:

.hoverable:hover
{
    //conteúdo das classes displayblock e colorblue juntas.
}

Add the class to all elements, directly or via the code jQuery down below:

$("div#contenthead div.left span.cursos").addClass("hoverable");
$("div#contenthead div.left span.atendimento").addClass("hoverable");
$("div#contenthead div.left span.acaosocial").addClass("hoverable");
$("div#contenthead div.left span.calendario").addClass("hoverable");

The end result will be to apply the settings only when the event :hover happen in the element under the cursor.

Answer 2

you can do it this way:

var topmenu = $("div#contenthead div.topmenu");
var leftSpan $("div#contenthead div.left span");
var listas = {};
var spams = {};

listas.cursos = $("ul.cursos", topmenu);
listas.atendimento = $("ul.atendimento", topmenu);
listas.acaosocial = $("ul.acaosocial", topmenu);
listas.calendario = $("ul.calendario", topmenu);    

spams.cursos = $("span.cursos", topmenu);
spams.atendimento = $("span.atendimento", topmenu);
spams.acaosocial = $("span.acaosocial", topmenu);
spams.calendario = $("span.calendario", topmenu);

var atualizarMenu = function (name) {
  for (var key in listas) {
    listas[key].removeClass("displayblock");
    spams[key].removeClass("colorblue");
  }
  if (name) {
    listas[name].addClass("displayblock");
    spams[name].addClass("colorblue");
  }
}

leftSpan.hover(function() { topmenu.addClass("displayblock"); });   
leftSpan.filter(".cursos").hover(function() { atualizarMenu("cursos"); });
leftSpan.filter(".atendimento").hover(function() { atualizarMenu("atendimento"); });
leftSpan.filter(".acaosocial").hover(function() { atualizarMenu("acaosocial"); });
leftSpan.filter(".calendario").hover(function() { atualizarMenu("calendario"); });
leftSpan.filter(".login").hover(function() { atualizarMenu(null); });

in this way, you will go beyond decreasing code, will decrease the number of queries to DOM objects and decrease the amount of memory allocated by the script.

Answer 3

Apparently you have only 4 spans within the div.left, and when you put the class "colorBlue" in one you want to remove from all others. If this is the case, and span only have a single class, something like:

<div id="contenthead">
   <div class="left">
    <span class="atendimento">Click</span>

So just do it like this:

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <script>
        $("div#contenthead div.left span").hover(function() {
        $("div#contenthead div.topmenu").addClass("displayblock");
        var topMenuClass = $(this).attr("class");
        $("div#contenthead div.topmenu ul").removeClass("displayblock");
        $("div#contenthead div.topmenu ul." + topMenuClass ).addClass("displayblock");
}, function(){
 $("div#contenthead div.topmenu").removeClass("displayblock");

});
    </script>

If span has more than one class, so you don’t have to do much, I advise you to use a data attribute to make it easier:

<div id="contenthead">
   <div class="left">
    <span class="small atendimento" data-topmenu="atendimento">Click</span>

And the script would look like this:

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <script>
        $("div#contenthead div.left span").hover(function() {
        $("div#contenthead div.topmenu").addClass("displayblock");
        var topMenuClass = $(this).data("topmenu");
        $("div#contenthead div.topmenu ul").removeClass("displayblock");
        $("div#contenthead div.topmenu ul." + topMenuClass ).addClass("displayblock");
}, function(){
 $("div#contenthead div.topmenu").removeClass("displayblock");

});
    </script>

Edit: About your comment not closing the menu, this is because you have to remove the displayblock class from the topmenu when the mouse leaves the top. In this case, the Hover event, can receive a second Function, to run.

Answer 4

To reduce a little can be done like this.

    $("div#contenthead div.left span.atendimento").hover(function() {
    $("div#contenthead div.topmenu ul.atendimento").addClass("displayblock");
    $("div#contenthead div.topmenu ul.acaosocial,"+
    "div#contenthead div.topmenu ul.cursos,"+
    "div#contenthead div.topmenu ul.calendario").removeClass("displayblock");