简体   繁体   中英

unbind children from click for accordion

I have an accordion menu that I've written for SharePoint:

parent.click(function(event) {
    event.preventDefault();
    var childUL = $(this).closest("li").find("> ul");
    var isVisible = childUL.is(":visible");

    if($(e.target).hasId("#zz12_V4QuickLaunchMenu ul > ul > li > a")){
    e.stopPropagation();
     }
    else if (isVisible) {
        childUL.slideUp();
    } else {
        childUL.slideDown();
    }
});

The issue I'm running into is with the parent <li> 's. If the parent list-item has a url, I have to utilize preventDefault to ensure that the onClick event doesn't fire as normal so that the submenu displays. However, I'm finding that because I have prevent default activated, all the links essentially slide up/down when you click on them versus firing the normal click event. I can't figure out where/how to implement the unbind event.

jsfiddle updated.

EDIT: Based on the answer below, I found the structure I needed and was able to stopPropagation. However, it stops it for the entirety of the function. Can someone please aid me in figuring out the correct selector? Not familiar with nodename as suggested below and as this is nested in SharePoint's five million css classes. I'd like to use a selector that is direct as possible. Please write actual examples if you feel so inclined to help, thank you!

You need to:

  • identify if the click is on a link in a submenu
  • if it is, apply event.stopPropagation();

Then, links in submenus will behave like normal links.


Further Reading: https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM