Question

我目前正在使用twitter bootstrap中的子菜单实现。代码行如下 -

<ul class="dropdown-menu toggle-drop-down">

 <li style="left: 100px; position: absolute; top: -18px;">
  <img src="@{'/public/images/modal_arrow.png'}">
 </li>

 <li>
  <a href="/editSystemNotification/${notification.id}">Edit</a>
 </li>                                                          

 <li class="dropdown-submenu">
  <a class="sendSettings" href="/editSystemNotification/${notification.id}">Send</a>
 </li>

</ul>

Javascript代码： -

var subList = "<ul class=\"sublist-remove dropdown-menu\"><li><a tabindex='-1' href=\"#\"><i class=\"fa fa-mail-forward\"></i> Send Mail</a></li><li><a href=\"#\"><i class=\"fa fa-hand-o-up\"></i> Notify</a></li></ul>";
    $(".sendSettings").hover(function(e) {
            console.log("hello world");
            $('.sublist-remove').remove();
            e.stopPropagation();
            $(this).parent().append(subList);
        });

但是当我试图悬停在子菜单部分时，我发现主要的下拉元素正在盘旋，因此它会产生闪烁效果。而且我无法点击子菜单。

请帮我解决问题，因为我哪里出错了？

Answer 1

我想你使用的是Bootstrap 2？ Bootstrap 3中删除了子菜单。在http://www.bootply.com/86684

中可以找到Bootstrap 3中的子工作表示例。

引导子菜单悬停的问题

1 个答案: