Hover de JQuery vs.Hacer clic en el menú expandible

A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:

<script type="text/javascript">

jQuery('.nav-add li.level0, .nav li').hover(
function(){
    jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){

    });
},
function(){
    jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
        jQuery(this).removeClass('inSlide');
    });
}
)
jQuery('.nav-widget').hide();

</script>

Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?

I tried replacing .hover with .click or .mouseup to no avail.

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

What behavior do you want on click? -

2 Respuestas

Assuming you just want to toggle the hover behavior by click en lugar de hover puedes probar algo como esto.

jQuery('.nav-add li.level0, .nav li').click(function(){
    if(!$(this).data('clicked')){
       jQuery(this)
       .data('clicked', true)
       .children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
       .addClass('inSlide')
       .slideToggle(700,function(){

       });
    }
    else{
       jQuery(this)
       .data('clicked', false)
       .children('.nav-widget, ul:not(.active)')
       .delay('2000')
       .slideUp(500,function(){
            jQuery(this).removeClass('inSlide');
       });
    }
});
jQuery('.nav-widget').hide();

Respondido 02 Feb 12, 02:02

That didn't quite work, but I think it's because the menus in Magento are dynamically generated based on your product categories and navigate to a product category page when you click a main menu item, rather than expand the submenu. To get this to work, I'll have to find a way to make the main category items unclickable. This is probably why I haven't seen anyone else with a true accordion/expandable style menu. - Miles Pfefferle

The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.

jQuery('.nav-add li.level0, .nav li').click(
    function(){
        jQuery(this).children('.nav-widget:not(.inSlide),
        ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
    });
}

Respondido 02 Feb 12, 02:02

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