드롭 다운 메뉴의 입력 상자

웹 페이지를 만들고 있습니다. 내 헤더 클래스에 로그인 버튼이 있습니다. 버튼을 클릭하면 드롭 다운 상자가 나타나고 두 개의 입력 상자가 있습니다. 하지만 입력 상자를 클릭하면 내 드롭 다운 상자가 비활성화됩니다. 왜?드롭 다운 메뉴의 입력 상자

코드 :

<li class="dropdown nav navbar-nav "> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
     Log in<b class="caret"></b> 
    </a> 

    <ul class="dropdown-menu" style=" padding:10%;"> 
     <label class="labelstyle">First Name: 
     <input name="fname" autofocus type="text" class="active" id="myinputbox1" 
     size="25" maxlength="50" autofocus/> 
     </label> 
     <label class="labelstyle">password: 
     <input name="fname" type="text" class="fieldstyle" id="myinputbox2" 
     size="25" maxlength="50" /> 
     </label> 
     <li class="divider"></li> 
     <li> 
     <button href="#" class="btn btn-success">log in</button> 
     <button href="#" class="btn btn-success" style="float:right;">Cancel</button> 
     </li> 
    </ul>

출처

2013-09-02 Sonal Goyal

자바 스크립트 코드 게시. * something *은'.dropdown-toggle' 클래스를 동작시키고, 당신은 그것을 게시하지 않았습니다. –

JS는 어디에 있나요 ?? – thecodejack

이벤트 버블 링과 관련이 있다고 생각합니다. 문제를 해결하는 데 도움이되는 javascript/jQuery를 공유하십시오. –

체크 아웃 Fiddle

HTML

<li class="dropdown nav navbar-nav"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Log in<b class="caret"></b></a> 

<ul class="dropdown-menu"> 

    <li> 
    <input name="fname" type="text" class="active" id="myinputbox1" size="25" maxlength="50" value="First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> 

    <input name="fname" type="text" class="fieldstyle" id="myinputbox2" size="25" maxlength="50" value="Password" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> 
    </li> 

    <li class="divider"></li> 

    <li> 
    <button href="#" class="btn btn-success">Log in</button> 
    <button href="#" class="btn btn-success rgt">Cancel</button> 
    </li> 

</ul> 

</li>

CSS

.dropdown-toggle { 
    background: #444; 
    padding: 3px 8px 3px 8px; 
    font-family: Verdana; 
    font-size: 13px; 
    color: #fff; 
    letter-spacing: 1px; 
    text-decoration: none; 
} 
.dropdown { 
    list-style: none; 
    width: 200px; 
} 
.dropdown-menu { 
    background: #444; 
    display: none; 
    list-style: none; 
    width: 190px; 
    padding: 20px 10px 10px 15px; 
    margin: 0; 
    overflow: hidden; 
} 
input { 
    width: 180px; 
    height: 16px; 
    margin: 0 0 10px 0; 
    padding: 2px 0 2px 3px; 
    border: none; 
    outline: none; 
} 
button { 
    background: #ccc; 
    border: none; 
    outline: none; 
} 
button:hover { 
    background: #eee; 
} 
.rgt { 
    float: right; 
    margin-right: 8px; 
} 
.divider { 
    height: 15px; 
}

jQuery를

$(function() { 

    $('.dropdown-toggle, .rgt').click(function() { 
    $('.dropdown-menu').toggle('blind', 500); 
    }); 

});

출처

2013-09-02 15:50:57 mdesdev

"desable"새로운 단어를 이잖아. :) 당신은 보이지 않는 말을하고 싶었을 것입니다.

JavaScript를 사용하고 있습니다. jQuery를 사용하는 것이 좋습니다. "토글 (toggle)"선택기에 문제가 있거나 충분하지 않거나 잘못 확장 한 경우 일 수 있습니다.

추가 분석을 위해 모든 HTML 코드 + JavaScript를 게시해야합니다.

P. 나는 주석으로 이것을 작성 하겠지만 stackoverflow에 대한 어리석은 제한과 50 평판이 필요하기 때문에 나는 위선적이다.

출처

2013-09-02 05:51:37 Nemanja

드롭 다운 메뉴의 입력 상자

답변

관련 문제