Question

在发布此处之前，我已经搜索了很多关于这个问题的帖子，没有找到任何解决方案。

我正在使用Twitter bootstrap 2.3.2并在下拉菜单中包含一个表单。桌面浏览器上的一切正常。在移动浏览器上，当我点击导航中的登录链接打开登录表单但是当我点击来自任何字段或按钮时它正在关闭，用户无法在关闭时输入任何信息。

以下是我导航菜单的代码部分

<li class="dropdown" id="menuLogin"> <a class="dropdown-toggle btn" href="login" data-toggle="dropdown" id="navLogin"><i class="icon-lock"></i> Login</a>
    <div class="dropdown-menu span3" style="background:#0C0;">
        <form method="post" action="<?php echo base_url().'login';?>" id="login">
            <div class="control-group">
                <input type="text" name="login_email" id="login_email" value="" placeholder="Email" class="span3" />  <?php echo form_error('login_email')?>
            </div>
            <div class="control-group">
                <input type="password" name="login_password" id="login_password" value="" placeholder="password" class="span3"/>  <?php echo form_error('login_password')?>
            </div>
            <div class="control-group">
                <div class="text-left" style="padding-left:8px;">
                    <input type="submit" class="btn" name="login" value="Login" style="background-color: #3498DB;" />
                    <a href="<?php echo base_url().'forgot_password';?>">Forgot Password?</a>
                </div>
            </div>
        </form>
    </div>
</li>

我尝试了以下代码，但没有运气

<script>
    $('.dropdown-menu input, .dropdown-menu button').on('click', function(e) {
        e.stopPropagation();
    });
</script>

由于

Answer 1

我找出了问题并解决了这个问题。

问题是我使用div代替ul来下拉。当你点击ul以外的时候它正在关闭。

我刚刚更换了这个

  <div class="dropdown-menu span3" style="background:#0C0;">

使用ul＆gt;利

 <ul class="dropdown-menu span3" style="background:#0C0;">
   <li>
    <form....
   </li>
</ul>

Twitter引导程序2顶部导航下拉列表与不在移动设备中工作

1 个答案: