javascript - 尝试创建嵌套下拉菜单，将鼠标悬停在父项上时会出现子弹出窗口

Question

我需要帮助弄清楚如何显示下拉菜单。然后单击下拉菜单中的一个按钮并获得一个新的“子”下拉菜单/弹出窗口并清除之前的“父”下拉菜单。

我现在遇到的问题是，当我单击父弹出链接时，我的父弹出窗口和子弹出窗口同时出现。我希望父项和子项在不同的时间打开和关闭。

子级和父级下拉列表的 HTML:

<div class="dropdown conversation-dropdown" style="float:left;margin-top:5px;">
<%= link_to "#", class:'btn btn-noti dropdown-toggle', role:'button', 'aria-expanded' =>'false', data:{toggle: 'dropdown'} do %>

 <span class="fa fa-envelope" aria-hidden="true" style="font-size:25px;"></span>


<% end %>

 <ul class="dropdown-menu" role="menu" style="width:500px;margin-left:-440px;">
  <li class="dropdown-header">
  <div class="row">

  <div style="float:left;">
  <h class="" >Conversations</h>
  </div>

<!-- child popup -->

<div class="dropdown new-message-dropdown" style="float:right;">

<%= link_to "", class:'btn dropdown-header', role:'button', 'aria-expanded' =>'false', data:{toggle: 'dropdown'} do %>
 <h style="margin-right:10px;">New Message</h>
<% end %>

<ul class="dropdown-menu" style="width:500px;margin-left:-440px;">
  <li class="dropdown-header">New Message</li>
  </ul>


</div>


<!-- end child popup -->


  </div>
  </li>

  <%= render current_user.conversations.order('created_at DESC').last(8) %>
    <li class="divider" role="separator"></li>
        <li ">
          <%= render 'conversations/conversation_dropdown' %>
        </li>
  </ul>
  </div>

Answer 1

这是您正在寻找的东西吗: Expand/Collapse pure CSS/HTML

昨晚我无意中发现了它。

希望对你有帮助