1

我正在创建一个网页。在我的标题类中，我有一个登录按钮。当我单击按钮时，会出现一个下拉框，其中有两个输入框。但是当我单击输入框时，我的下拉框会禁用。为什么？

代码：

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

2 回答 2

0

“desable”，这是一个新词。:) 我猜你想说隐形。

我也猜你正在使用 JavaScript，最好是 jQuery 来做到这一点。问题可能出在您的“切换”选择器中，其方式不够具体，或者您将其扩展错误。

为了进一步分析，您需要发布所有 HTML 代码 + JavaScript。

PS我会把它写成评论，但我不能因为stackoverflow的愚蠢限制和需要50名声望。

于 2013-09-02T05:51:37.297 回答
0

看看小提琴

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-02T15:50:57.553 回答