Question

I am having an issue with a jQuery toggle – you can see the issue here: http://jsfiddle.net/tKUgg/3/

As you can see, each item that appears in the yellow box, also appears in the black box. When you click “Main Item” in the black box, the corrosponding item in the yellow box is toggled.

The problem I am having is that when one of the sub-items is clicked, instead of toggling only itself, it also toggles its parent. I need it to only toggle itself. (For example, if you click “Sub Item a” in the black box, it should only toggle “Sub Item a” in the yellow box, but at the moment it toggles both “Sub Item a” and the parent “Main Item”)

I am fairly new to jQuery so I am sure its a stupid mistake.
How can I fix this?

(Note: The code is designed to work with a content management system so new map layers (categories) can be added/removed dynamically and have a corrosponding item appear in the menu with a toggle. Thats why its a little “spaghetti” as some of you have pointed out)

Thanks

Zach

Answer 1

You may want to consider revising the spaghetti code you have going on. My brain exploded when I looked at it.

Mentioned by DNR – stopPropagation() is necessary here when dealing with nested lists.

http://jsfiddle.net/V7CPr/