Not able to click on Dropdown Submenu Link

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>