Uso de Javascript para resaltar enlaces secundarios al pasar el mouse y alternar

I have a piece of JS that highlights the appropriate child set of links when you mouse-over the parent link.

But now, I'd also like to make the children links highlight when I toggle (click) the respective parent link.

Also, I'd like only one set of children links to be highlights at a time. Meaning, If I click on "Parent 2" Parent 1 will toggle off, and Parent 2 will toggle on.

Espero que esto tenga sentido ...

Here's the gist of what I have so far:

<script type="text/javascript">

    // Group 1
    $('#one').live('mouseover', function(){
        $('li.uno').addClass('highlight');
    });

    $('#one').live('mouseout', function(){
        $('li.uno').removeClass('highlight');
    }); 

    // Group 2
    $('#two').live('mouseover', function(){
        $('li.dos').addClass('highlight');
    });

    $('#two').live('mouseout', function(){
        $('li.dos').removeClass('highlight');
    }); 

    // Group 3
    $('#three').live('mouseover', function(){
        $('li.tres').addClass('highlight');
    });

    $('#three').live('mouseout', function(){
        $('li.tres').removeClass('highlight');
    }); 

</script>


            <ul><!-- Parent Links -->
                <li id="one">
                    <a href="#">Parent 1</a>                                    
                </li>

                <li id="two">
                    <a href="#">Parent 2</a>                                    
                </li>

                <li id="three">
                    <a href="#">Parent 3</a>                                    
                </li>           
            </ul>


            <ul><!-- Children -->       
                <li class="uno">
                    <a href="">Link<a/>
                </li>

                <li class="tres">
                    <a href="">Link<a/>
                </li>

                <li class="tres">
                    <a href="">Link<a/>
                </li>

                <li class="dos">
                    <a href="">Link<a/>
                </li>

                <li class="uno">
                    <a href="">Link<a/>
                </li>

                <li class="dos">
                    <a href="">Link<a/>
                </li>                               

            </ul>

Gracias por tu ayuda.

preguntado el 01 de febrero de 12 a las 04:02

2 Respuestas

Selecting elements, and changing their classes can be slow if you are expecting to be working with a large number elements. Likewise, you probably don't want to have to update the Javascript every time you add a new parent link to your document.

A good way to address this would be to change a single class of a parent element, and let CSS handle the selection and styling of all the child elements.

I've made a solution that you can demo at JSFiddle.

Respondido 01 Feb 12, 08:02

My only question, is how can I make it so only one parent/child set can be selected at a time... Meaning, if I select the link for "Group 2" "Group 1's" will return to normal - C perro

Add some class("children") to the ul container which contain all the child li and try this code.

$('#one').live('click', function(){
    $('ul.children li:not(.uno)').slideUp();
    $('ul.children li.uno').slideToggle();
    return false;
});
$('#two').live('click', function(){
    $('ul.children li:not(.dos)').slideUp();
    $('ul.children li.dos').slideToggle();
    return false;
});
$('#three').live('click', function(){
    $('ul.children li:not(.trees)').slideUp();
    $('ul.children li.trees').slideToggle();
    return false;
});

Demo

Respondido 01 Feb 12, 08:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.