Question

我正在使用Bootstrap：Dropover on Hover Plugin（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

您可以通过在所需元素上使用click事件然后在click事件中停止Propagation来实现。

例如： -

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

单击顶部的子菜单关闭

1 个答案: