Question

此表单下拉列表（使用Angular UI）并未按预期工作。点击输入时，下拉列表消失。有人有修复吗？谢谢！

<ul class="nav navbar-nav navbar-right pull-right">
                        <li class="dropdown" dropdown id="menuLogin">
                            <a href="#" class="dropdown-toggle" dropdown-toggle id="navLogin">Login</a>
                            <div class="dropdown-menu">
                                <form class="form form-group" id="formLogin" _lpchecked="1"> 
                                    <input name="username" id="username" type="text" class="form-control" placeholder="Username"> 
                                    <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                                    <button type="button" id="btnLogin" class="btn btn-default">Login</button>
                                </form>
                            </div>
                        </li>
                        <!-- <li><a href="#">Log in</a></li> -->
                        <li><a href="#" class="cart" ui-sref="basket"><span class="glyphicon glyphicon-shopping-cart"></span><ngcart-badge></ngcart-badge></a></li>
                        <li><a href="#" class="search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
                    </ul>

Answer 1

您可以通过添加

来阻止切换

ng-click="$event.stopPropagation()"

到您的div：

<div class="dropdown-menu" ng-click="$event.stopPropagation()">
                            <form class="form form-group" id="formLogin" _lpchecked="1"> 
                                <input name="username" id="username" type="text" class="form-control" placeholder="Username"> 
                                <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                                <button type="button" id="btnLogin" class="btn btn-default">Login</button>
                            </form>
                        </div>

Angular UI Bootstrap - 单击时在下拉切换下拉列表中的表单

1 个答案: