无法单击下拉子菜单链接

Question

I have following code and when I hover on Menu it has some dropdown submenus and I am not able to click on any of my submenu links:

HTML:

<li class="onesource-user">
<a href="#"><%=expert.firstname  %>&nbsp;<%=expert.lastname  %>(<%= expert.login %><%=session.getAttribute("multi_lobs")==null?"":" - "+view_name  %>)</a>
<ul>
    <li><a href="index?page=profile" class="profile">Profile</a></li>
    <li><a href="index?page=favorites" class="favorite">Favorites</a></li>
    <li class="log-out"><a href="index?page=logout" class="btn">Log out</a></li>
</ul>

JS:

$('.onesource-user').on('click', function(e){
  e.preventDefault();
  $(this).toggleClass('open');
  return false;
 })

Screenshot:

screenshot

Answer 1

Because of you're using event on .onesource-user so it'll aply on all it children so ( e.preventDefault + return false ) . this would help .

$('.onesource-user > a').on('click', function(e){
    e.preventDefault();
    $(this).parent().toggleClass('open'); 
    return false;
})

see the above snippet :

 $('.onesource-user > a').on('click', function(e){ e.preventDefault(); $(this).parent().toggleClass('open'); return false; }) 

 .onesource-user ul{ display:none; } .onesource-user.open ul{ display:block } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <li class="onesource-user"> <a href="#">Sample UserName</a> <ul> <li><a href="index?page=profile" class="profile">Profile</a></li> <li><a href="index?page=favorites" class="favorite">Favorites</a></li> <li class="log-out"><a href="index?page=logout" class="btn">Log out</a></li> </ul> </li>