2013-04-17 3 views
6

로그인 할 때 사용할 계획 인 부트 스트랩 드롭 다운 메뉴가 있습니다. 괜찮아 보이지만 사용자 이름을 선택했을 때 입력이 사라 졌으므로 입력 값이 사라집니다. 입력에 대한 지원을 추가하는 방법은 무엇입니까? 아니면 이에 대한 효과적인 방법이 있습니까?입력시 부트 스트랩 드롭 다운이 사라짐

내 현재 코드는 다음과 같습니다 jsfiddle에서

<li id="fat-menu" class="dropdown"> 
     <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Login <b class="caret"></b></a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> 
      <li role="presentation"><input name="username" type="text" placeholder="Username" /></li> 
      <li role="presentation"><input name="password" type="password" placeholder="Password" /></li> 
      <li role="presentation" class="divider"></li> 
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Login</a></li> 
      </ul> 
    </li> 

내 시도. http://jsfiddle.net/KF8dv/

+0

내가하려고 한 [jsfiddle] (http://jsfiddle.net) – Adrift

+0

를 추가하지만 respond.Heres에 드롭 다운에게 링크를 얻을 수 없었다하십시오 http://jsfiddle.net/KF8dv/를 – kezi

답변

12

이를 참조하십시오 : 나는 전혀 작동 드롭 다운을 얻을 couldnt한다 - 당신은 입력 텍스트 상자를 클릭하면 드롭 다운 이벤트를 방지하기 위해 필요 http://jsfiddle.net/b8769/

. 자바 스크립트를 사용하면이 작업을 수행 할 수 있습니다. stopPropagation

$('.dropdown-menu input').click(function(e) { 
     e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes. 
    }); 
+0

니스 !! 빠른 솔루션. 답변 해주셔서 감사합니다! – kezi

+0

언제든지 .. 응용 프로그램에서 이것이 가능한지 확인하십시오 ... – PSL

+1

어떤 부트 스트랩에 js fiddle을 쓸 때 외부 URL로 부트 스트랩의 CDN 경로를 사용할 수 있습니다 .. http://www.bootstrapcdn.com/ – PSL

관련 문제