无法单击“下拉菜单链接”

Question

我有以下代码，当我将鼠标悬停在菜单上时，它有一些下拉子菜单，我无法点击任何子菜单链接：

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

Answer 1

由于您在.onesource-user上使用了某个活动，所以它会对所有孩子都这样（e.preventDefault + return false）。 这会有所帮助。

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

见上面的代码：

＆＃13;

＆＃13;

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

＆＃13;

.onesource-user ul{
  display:none;  
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;