Can you reduce this script without losing functionality?

Question

Can you reduce this script without losing functionality?

Navigation

#1 by (7 votes)
#2 by (6 votes)
#3 by (3 votes)
#4 by (2 votes)

7

<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 on distinct elements by changing color and visibility.

Regarding size, the @fernandomondo solution is the best, leaves the script very small and simple to edit, very useful, but @tobymosque has touched on a subject that I am very value, weight to the end user, even that his is bigger, which one would be lighter? do you have any way to calculate script weight?

javascript jquery hover addclass

asked by anonymous 11.11.2015 / 16:41

4 answers

7

Simple solution with CSS only:

Implement a CSS class that contains the desired settings in the hover pseudo-class:

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

Add the class to all elements, directly or via the jQuery tag 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 final result will be to apply the settings only when the :hover event occurs in the element under the cursor.

11.11.2015 / 18:21

6

you can do as follows:

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 go beyond decreasing code, it will decrease the number of queries to DOM objects and decrease the amount of memory allocated by the script.

11.11.2015 / 17:32

2

To reduce it a bit can be done as well.

    $("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");

11.11.2015 / 17:01

How to create a configuration file in Laravel 4? Verify that you have more than one character in a String

score 3 · Accepted Answer

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

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

Do not 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 I do not 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 looks 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 to close the menu, this is because you have to remove the displayblock class from the topmenu when the mouse exits from above. In this case, the hover event may receive a second function, to execute.