Question

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

代码：

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

Answer 1

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

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

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

P.S。我会把它写成评论，但我不能因为stackoverflow的愚蠢限制而需要50个声誉。

Answer 2

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

});

输入框在下拉菜单中

2 个答案: