2014-01-06 6 views
2

현재 트위터 부트 스트랩에서 하위 메뉴 구현을 사용 중입니다.부트 스트랩 하위 메뉴 호버 슈팅 문제

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

자바 스크립트 코드를 : - - 다음과 같이 코드의 라인은

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); 
     }); 

하지만 하위 메뉴 섹션에 마우스를하려고 할 때, 나는 주 드롭 다운 요소를 찾을 수에 공중 선회되고 있으며, 따라서 깜박 거리는 효과를냅니다. 하위 메뉴를 클릭 할 수 없습니다.

어디에서 잘못 했습니까?

+0

에서 찾을 수 있습니다. $ ('. sublist-remove')로 인해 문제가 발생했습니다. 이 명령문은 필요하지만 다른 방법으로 처리하는 방법을 알 수는 없지만. 일부 답변하시기 바랍니다 ... – user3115056

+0

[this fiddle] (http://jsfiddle.net/MuQdf/2/)에서 문제를 재현하지 못했습니다. 어쩌면 일부 CSS가 누락 되었습니까? – ringstaff

+1

부트 스트랩 CSS가 누락되었습니다. 그게 당신이 하위 메뉴를 얻지 못하는 이유입니다. – user3115056

답변

1

부트 스트랩 2를 사용하고 있습니까? 하위 메뉴는 부트 스트랩 3에서 제거됩니다. 부트 스트랩 3에서 작업중인 하위 메뉴의 예는 http://www.bootply.com/86684