jQuery .toggle() to show and hide a sub-menu

后端未结

关注

 2  1539

野性不改 2020-12-20 06:04

I\'m trying to use show/hide on a submenu. It looks like this:

Parent 1
Parent 2
1. Child A
2. Child B
Parent 3

2条回答

北荒 (楼主)

2020-12-20 06:06

//select all the `` element that are children of the `.parent` element
$('.parent').children().click(function(){
    
    //now find the `.child` elements that are direct children of the clicked `` and toggle it into or out-of-view
    $(this).children('.child').slideToggle('slow');     
});

Demo: http://jsfiddle.net/jasper/z7Zgw/1/

Basically the code above uses this to reference the clicked

element so we can find the .child element that is a child of the clicked
element.

This: $('.child')

Changed to: $(this).children('.child')

Update

Also you can stop the propagation of the click event on the nested .child elements like this:
```
$('.parent').children().click(function(){
    $(this).children('.child').slideToggle('slow');

//select all the `.child` elements and stop the propagation of click events on the elements
}).children('.child').click(function (event) {
    event.stopPropagation();
});
```
Demo: http://jsfiddle.net/jasper/z7Zgw/9/

Docs:
- event.stopPropagation(): http://api.jquery.com/event.stopPropagation
- .children(): http://api.jquery.com/children

0 讨论(0)

查看其它2个回答

jQuery .toggle() to show and hide a sub-menu

Update