简体   繁体   中英

Unable to click anchor tags inside onClick() event drop-down

I have this HTML:

<ul>
    <li class="parent_menu">
        <ul class="child-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

    </li>
</ul>

The following Jquery to show the drop down when hover over parent:

$('.parent_menu').on('touchstart click', function(e){
                e.stopPropagation(); 
                e.preventDefault();

                $(".child-menu", this).slideToggle(400); 

            }       
        );

What happens here is, the drop down menu is showing if I click on the parent menu. But I am unable to click on the anchor tag of the child menu items (like Link 1, Link 2, etc..) in the drop down list. I think this is due to the slideToggle() or onClick() used above. How can I fix it so the child menu links are clickable?

Are these here for a reason?

e.stopPropagation(); 
e.preventDefault();

preventDefault() will kill your anchors. If you don't need them, remove them.

http://jsfiddle.net/isherwood/Qv8hn


Here's how you'd use stopPropagation() to prevent your links from toggling the menu:

$('.parent_menu').on('touchstart click', function (e) {
    $(".child-menu", this).slideToggle(400);
}).find('a').on('touchstart click', function (e) {
    e.stopPropagation(); 
});

http://jsfiddle.net/isherwood/Qv8hn/1

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