下拉菜单中的输入框

Inputbox in dropdown menu

本文关键字：输入 下拉菜单      更新时间：2023-09-26

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

代码：

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

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

"desable"，这是一个新词。：）我猜你是想说隐形。

我还猜测您使用的是JavaScript，最好是jQuery。问题可能出现在您的"切换"选择器中，因为它不够具体，或者您错误地扩展了它。

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

p.S。我想写这篇评论，但我不能，因为stackoverflow有愚蠢的限制，需要50个声誉。

相关文章：