Twitter bootstrap 2 顶部导航下拉菜单中的 from not working in mobile答案

【问题标题】：Twitter bootstrap 2 top navigation dropdown with from not working in mobileTwitter bootstrap 2 顶部导航下拉菜单中的 from not working in mobile
【发布时间】：2014-03-13 14:13:34
【问题描述】：

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

网站链接：http://bit.ly/1geHJr0

我正在使用 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>

谢谢

【问题讨论】：

哪个浏览器和什么版本？？？在 Firefox 中为我工作
@AamirShahzad 移动设备上的 Chrome。它在桌面上的 Firefox 和 chrome 中运行良好。移动 Chrome 版本是 32.0.1700.99
你可以尝试使用 event.stopImmediatePropagation api.jquery.com/event.stopImmediatePropagation 吗？或 event.preventDefault() ？
我刚刚在三星 Galaxy S4 上的 Mobile Chrome V 32.0.1700.99 上进行了尝试，并且成功了。也许它可以被隔离到特定范围的移动设备？我对此感到痛苦:(我曾经遇到过类似的问题：用户点击字段并显示表单并再次关闭。这是因为一个元素悬停在该字段上。也许在您的情况下可能与屏幕尺寸类似?
@Ravimalya 是的，也试过了，不，没有帮助；（

标签： html twitter-bootstrap mobile menu twitter-bootstrap-2

【解决方案1】：

我发现了问题并解决了这个问题。

问题是我使用 div 而不是 ul 作为下拉菜单。当您单击 ul 以外的其他按钮时，它正在关闭。

我刚换了这个

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

用 ul > li

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

【讨论】：