带有 twitter-bootstrap 的下拉菜单

Posted 2023-02-24

【中文标题】带有 twitter-bootstrap 的下拉菜单

【英文标题】：Dropdown with a form inside with twitter-bootstrap

【发布时间】：2011-12-27 23:07:03

【问题描述】：

我的 TopBar 中有一个下拉菜单，使用 Twitter Bootstrap CSS 框架构建。

我有 3 个问题，我找不到任何解决方案：

文本和密码输入字段太大，如何调整？让下拉框变大也可以。 字段的标签太暗了，如何使它们变亮一点？ 当我单击其中一个字段时，下拉菜单正在关闭。我必须重新打开它，然后我才能输入，直到单击下一个字段。即使关闭下拉菜单，这些值也会保留。我怎样才能让它保持打开状态？

这是问题1和2的截图：

这也是现在 TopBar 的 html。

<div class='topbar-wrapper'>
  <div class='topbar'>
    <div class='topbar-inner'>
      <div class='container'>
        <h3>
          <a href="/">Webworld</a>
        </h3>
        <ul class='nav'>
          <li>FILLER...</li>
        </ul>
        <ul class='nav secondary-nav'>
          <li class='dropdown' data-dropdown='dropdown'>
            <a href="#" class="dropdown-toggle">Login</a>
            <div class='dropdown-menu' id='signin-dropdown'>
              <form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
                <fieldset class='textbox'>
                  <label id='js-username'>
                    <span>Username</span>
                    <input autocomplete="on" id="username" name="username" type="text" />
                  </label>
                  <label id='password'>
                    <span>Passwort</span>
                    <input id="userpassword" name="userpassword" type="password" />
                  </label>
                </fieldset>
                <fieldset class='subchk'>
                  <input name="commit" type="submit" value="Log In" />
                </fieldset>
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

rails 需要隐藏的输入并自动生成。

我已经尝试复制 twitter 使用的登录表单的实现，但是当我尝试这样做时，TopBar 的高度约为 250 像素，并且下拉列表的内容是打开的，不能关闭。

到目前为止，我没有自定义 CSS 或 javascript，除了引导文档建议的正文中 40 像素的顶部填充。

有人可以帮我解决这个问题吗？

【参考方案1】：

尝试在您的 javascript 中某处添加以下代码。它应该阻止它发生。

  $('.dropdown-menu').find('form').click(function (e) 
    e.stopPropagation();
  );

【讨论】：

完美，也为我工作 - 但是，我认为您缺少 ); 来正确结束在触发 click 事件时要执行的函数的定义:)

这个已经失效了，参考kajo的回答

【参考方案2】：

（Twitter 引导程序 2.x）

您可能希望将style="" 的内容移动到您的样式表...

如果用户输入了错误的密码：

将open 类添加到li class="dropdown open"

和error 到fieldset class="control-group error" 的类

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
    <div class="dropdown-menu">
      <form action="" id="form_login" style="margin: 0; padding: 3px 15px" accept-charset="utf-8" method="post">
        <fieldset class="control-group">
          <label for="form_email" class="control-label">Email address</label>
          <div class="controls">
            <div class="input-prepend" style="white-space: nowrap">
              <span class="add-on"><i class="icon-envelope"></i></span>
              <input type="email" name="email" id="form_email" autocomplete="on" class="span2">
            </div>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label for="form_password" class="control-label">Password</label>
          <div class="controls">
            <div class="input-prepend" style="white-space: nowrap">
              <span class="add-on"><i class="icon-lock"></i></span>
              <input type="password" name="password" id="form_password" class="span2">
            </div>
          </div>
        </fieldset>
        <label class="checkbox">
          <input type="checkbox" name="remember" value="true"> Remember me
        </label>
        <p class="navbar-text">
          <button type="submit" class="btn btn-primary">Login</button>
        </p>
      </form>
    </div>
  </li>
</ul>

您不需要任何额外的 css 或 javascript 来使它看起来不错（使用 TB2.x）

【参考方案3】：

如果您不想停止传播您的事件，或者该解决方案对您不起作用，您可以在 bootstrap-dropdown 初始化附近的某处添加此代码：

$('html').off('click.dropdown.data-api');
$('html').on('click.dropdown.data-api', function(e) 
  if(!$(e.target).parents().is('.dropdown-menu form')) 
    $('.dropdown').removeClass('open');
  
);

【参考方案4】：

关于您的第三个问题 - 在您的 bootstrap-dropdown.js 注释源代码行中

$('html').on('click.dropdown.data-api', clearMenus)

并在此处写下：

$(document).bind('click', function(e) 
    var $clicked = $(e.target);
    if (!$clicked.hasClass("dropdown-menu") &&
            !$clicked.parents().hasClass("dropdown-menu"))
        clearMenus();
    
);

【讨论】：

遇到与该用户相同的问题，但这些解决方案不起作用：***.com/questions/18306433/… 决定打开一个单独的问题而不是这个旧问题，以防新版本的问题不同。

如果你不想修改外部维护的插件，@crimefighter 的solution 可以完成同样的事情

【参考方案5】：

https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559

max-width设置为220px，去掉这个属性，它会自动拉伸。

【讨论】：

这确实是问题 1 的解决方案，效果比 marimaf 提到的解决方案要好得多，但问题 3 仍未解决 :( 尤其是 #3 是最烦人的。

如果您为此 max-width 属性添加选择器，由于您添加的链接已失效，因此答案会更加清晰。

【参考方案6】：

它看起来像你面临的一个基于 CSS 的问题。

我用以下样式修复了它：

#signin-dropdown 
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1em;

#signin-dropdown form 
    margin:0px;

#signin-dropdown form .textbox 
    margin-bottom:0em;
    padding-top:0em;


#signin-dropdown form .subchk 
    margin-bottom: 5px;
    padding-top: 8px;


#username, #password, #userpassword 
    color: #404040;
    float: left;
    font-size: 13px;
    line-height: 18px;
    padding-top: 0px;
    text-align: left !important;
    width: 140px;

【参考方案7】：

关于您的问题 1 和 2。

您是否尝试过设置输入的长度？您可以通过设置输入标签的“大小”属性来做到这一点。你可以read more here

您是否尝试更改标签的样式？例如：

<span style="color:#FFFFFF">Username </span>

【讨论】：

好的，定义内联样式 :D 我很好奇为什么我自己没有看到 :) 但是关闭框的问题仍然存在。

【参考方案8】：

你只需在<form></form>标签中添加你的内容

像这样：

 <div class="dropdown  dropdown-scroll" id="selectedClient">
    <button class="btn btn-block btn-lg btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        انتخاب <span class="caret"></span>
	</button>
    <div class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu1">
        <button type="button" class="close">&times;</button>
        <form>
            <ul>
                <li role="presentation">
                    <input id="searchSubClientInput" type="text" class="form-control" placeholder="جستجو بر اساس نام خانوادگی" ng-model="query">
                </li>
            </ul>
        </form>
		<ul class="select-list scrollable-menu">
			<li class="dropdown-header">خودم</li>
		</ul>
	</div>
</div>