尝试创建嵌套下拉列表时，父项悬停时会出现子弹出窗口

Question

我需要帮助找出如何显示下拉列表。然后单击下拉列表中的一个按钮，获得一个新的＆＃34;孩子＆＃34;下拉/弹出并清除以前的父母＆＃34;下拉列表。

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你要找的东西： Expand/Collapse pure CSS/HTML

昨晚我偶然偶然发现了它。

希望有所帮助