Bootstrap 大型菜单，最后一个下拉菜单保持可见

Question

我用 bootstrap-3

创建了这个超级菜单

<nav class="yamm navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand navbar-brand-centered">
                <a href="#">Logo</a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar-brand-centered">
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown yamm-fw">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Some Procedure</a>
                <ul class="dropdown-menu">
                        <li>
                    <div class="yamm-content">
                                <div class="row">
                            <div class="col-xs-12 col-md-9 col-sm-6 bg1 nopadding">
                                <div class="megamenu">
                                    <h4>Some Text Some Text Some Text </h4>
                                    <hr />
                                    <ul>
                                        <li><span>Some Text Some Text Some Text Some Text Some Text </span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
                </li>
                <li class="dropdown yamm-fw">
                    <ul class="dropdown-menu">
                            <li>
                        <div class="yamm-content">
                                <div class="row"></div>
                        </div>
                    </li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown yamm-fw">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Search Here</a>
                <ul class="dropdown-menu">
                <li>
                    <div class="yamm-content">
                        <div class="row">
                        <div class="col-xs-12 col-md-12 col-sm-12 bg1 searchbg">
                            <div class="megamenu">
                                <form role="form">
                                  <div class="form-group">
                                    <label for="email">Pick A Date</label>
                                    <input type="datepicker" class="form-control" id="datepicker">
                                  </div>
                                  <button type="submit" class="btn btn-default">Submit</button>
                                </form>
                            </div>
                        </div>
                        </div>
                    </div>
                </li>
                </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

最后一个菜单 drop-down 有表格，我试图让它在页面加载时保持可见，使用 style="display: block !important" 它确实保持可见，但一旦光标离开 drop-down 它自己关闭。

鼠标悬停时可见下拉菜单

$('.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(300);
    }, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(300);
});

我面临的第二个问题是 form 有 datepicker input，当点击输入 select 日期时，日历显示 drop-down 和 form日历关闭后。

我已经尝试过可能的解决方案和答案here and here and here但没有任何效果，或者可能是我做错了。

Fiddle

Answer 1

The last menu drop-down has form and I'm trying it to stay visible on page load and it does stay visible using style="display: block !important"

您需要从悬停规则中排除 'stayopen' 元素

$('.dropdown').hover(function() {
    $(this).find('.dropdown-menu:not(#stayopen)').stop(true, true).delay(100).fadeIn(300);
}, function() {
    $(this).find('.dropdown-menu:not(#stayopen)').stop(true, true).delay(100).fadeOut(300);
});

此外，您还需要添加以下内容CSS，以便悬停菜单项出现在搜索框的顶部

#stayopen {
    z-index: 1;
}

以及以下内容，以便悬停菜单项出现时不会隐藏部分搜索菜单

.yamm-fw > .dropdown-menu
{
    background-color: transparent;
}

请注意，您可能需要根据您页面中的其他标记。

Fiddle - http://jsfiddle.net/ymxh5hru/

注意 - 原始答案是基于对所需内容的错误假设。

Answer 2

下拉菜单有这个默认问题。单击 <body> 时，它们应该会关闭。所以，我建议你做的是，再次实现相同的逻辑，但使用你自己的方式。我可以在这里给你看一个例子：

$(function () {
  $(".form-trigger").click(function () {
    $(this).closest(".dropdown").addClass("form-opened");
  });
  $(".send-button").click(function () {
    $(this).closest(".dropdown").removeClass("form-opened");
    return false;
  });
});

.dropdown.form-opened form.dropdown-menu {display: block;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="nav">
  <ul>
    <li class="dropdown">
      <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" class="btn btn-default">
        Dropdown trigger
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" aria-labelledby="dLabel">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" class="btn btn-default form-trigger">
        Form Trigger
        <span class="caret"></span>
      </a>
      <form class="dropdown-menu" aria-labelledby="dLabel" class="form-inline" style="padding: 15px;">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default send-button">Send invitation</button>
      </form>
    </li>
  </ul>  
</nav>

Bootstrap 大型菜单，最后一个下拉菜单保持可见

Bootstrap mega-menu, last drop-down stay visible

html

css

jquery

megamenu

twitter-bootstrap-3