부트 스트랩의 이중 드롭 아웃 메뉴

아래 코드는 한 번에 두 개의 드롭 아웃 메모를 엽니 다. 해결 방법과 그 이유를 알려주십시오.부트 스트랩의 이중 드롭 아웃 메뉴

JSFiddle 링크 : http://jsfiddle.net/jsTDz/

같은 코드를 복사 붙여 넣기 여기 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="btn-group" style="margin:100px;"> 
    <a class="btn" href="#">One</span></a> 
    <a id="drop1" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
     <li><a tabindex="-1" href="#">Action</a></li> 
     <li><a tabindex="-1" href="#">Another action</a></li> 
     <li><a tabindex="-1" href="#">Something else here</a></li> 
     <li class="dropdown-submenu"> 
     <a tabindex="-1" href="#">More options</a> 
     <ul class="dropdown-menu "> 
      <li><a tabindex="-1" href="#">Action</a></li> 
      <li><a tabindex="-1" href="#">Another action</a></li> 
      <li><a tabindex="-1" href="#">Something else here</a></li> 
     </ul> 
     </li> 
    </ul>  
    <a class="btn" href="#">ClickMe</span></a> 
    <a id="drop2" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
     <li><a tabindex="-1" href="#">One</a></li> 
     <li><a tabindex="-1" href="#">Two</a></li> 
     <li><a tabindex="-1" href="#">Three</a></li> 
    </ul> 
    </div> 
    </body> 
</html>

출처

2012-12-12 SunnyShah

동시에 떨어지는 두 메뉴를 얻고있는 이유는 "한 모두 적 UL이 있기 때문입니다 btn- 그룹 "DIV. 부트 스트랩 CSS와 JS는 "btn-group"클래스를 사용하여 그 아래에있는 UL을 대상으로합니다. 두 가지가 있기 때문에 둘 다 불이났습니다.

이 문제를 해결하려면 두 번째 UL을 클래스 "btn-group"이있는 DIV에 두십시오. 이렇게하면 목록의 두 세트가 서로 독립적으로 유지됩니다. 결국

, 코드는 다음과 같이한다 :

<div class="btn-group" style="margin:100px;"> 
<a class="btn" href="#">One</span></a> 
<a id="drop1" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
    <li><a tabindex="-1" href="#">Action</a></li> 
    <li><a tabindex="-1" href="#">Another action</a></li> 
    <li><a tabindex="-1" href="#">Something else here</a></li> 
    <li class="dropdown-submenu"> 
    <a tabindex="-1" href="#">More options</a> 
    <ul class="dropdown-menu "> 
     <li><a tabindex="-1" href="#">Action</a></li> 
     <li><a tabindex="-1" href="#">Another action</a></li> 
     <li><a tabindex="-1" href="#">Something else here</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 
<div class="btn-group"> 
<a class="btn" href="#">ClickMe</span></a> 
<a id="drop2" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
    <li><a tabindex="-1" href="#">One</a></li> 
    <li><a tabindex="-1" href="#">Two</a></li> 
    <li><a tabindex="-1" href="#">Three</a></li> 
</ul> 
</div>

출처

2012-12-12 17:33:56 Jamie

부트 스트랩의 이중 드롭 아웃 메뉴

답변

관련 문제