javascript - 单击顶部时关闭子菜单

Question

我正在使用 Bootstrap:悬停插件上的下拉菜单 (https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/)，它运行良好。问题是我不仅有只有链接的通用子菜单。在子菜单中，我有一个很大的登录表单，用户必须在其中单击一些输入框。我的问题是，当我点击里面的任何地方时，我的菜单会关闭，即使是在表单元素内。我知道当只有链接可供点击时，它应该这样做(或者至少没问题)，但在我的情况下，我实际上需要在其中做不止一件事情。

这是我的部分菜单(带有登录表单):

<li class="dropdown pull loginbox">
<a href="#" class="dropdown-toggle icon-user" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> LOGIN</i></a>

<div class="dropdown-menu">

    <section id="signin_alt" class="authenty signin-alt">
        <div class="section-content">
            <div class="wrap">
                <div class="container">
                    <div class="row" data-animation="fadeInUp">
                        <div class="col-md-4 col-md-offset-1">
                            <div class="normal-signin"> 
                                <div class="title">
                                    <h2>Sign In</h2>
                                </div> 
                                <div class="form-main">
                                    <div class="form-group">
                                        <div class="un-wrap">
                                            <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" placeholder="Username" required="required">
                                        </div>
                                        <div class="pw-wrap">
                                            <i class="fa fa-lock"></i>
                                        <input type="password" class="form-control" placeholder="Password" required="required">
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <input type="checkbox" class="form-control" checked>
                                                <label>Remember me</label>
                                            </div>
                                        </div>
                                        <div class="row top-buffer">
                                            <div class="col-md-4 col-md-offset-8">
                                            <button type="submit" class="btn">Sign In</button>
                                            </div>
                                        </div>
                                </div>
                                </div>      
                        </div>
                        </div>
                        <div class="col-md-2 hidden-xs">
                            <div class="horizontal-divider"></div>
                        </div>
                        <div class="col-md-4">
                            <div class="sns-signin">
                                <a href="#" class="facebook"><i class="fa fa-facebook"></i><span>Sign in with Facebook</span></a>
                                <a href="#" class="google-plus"><i class="fa fa-google-plus"></i><span>Sign in with Google+</span></a>
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <div class="row top-buffer bottom-wrap">
                        <div class="col-xs-6 col-md-2 col-md-offset-1">
                            <a href="<?php echo $serverUrl; ?>login/index.php" id="forgot_from_2">Forgot your password?</a>
                        </div>
                        <div class="col-xs-6 col-md-2">
                            <a href="#signup_wizard" id="signup_from_2">Create an account</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

使 jQuery 工作的所有标记都在第 2 行并且它工作了!我只需要它在鼠标悬停在子菜单上时不关闭子菜单，即使它疯狂地点击也是如此。有什么想法吗？

谢谢!

Answer 1

您可以通过在您想要的元素上使用点击事件，然后在点击事件中停止传播来做到这一点。

例如:-

$("#some_id").click(function(e){
     e.stopPropagation();      
});