Bootstrap 超级菜单，最后一个下拉菜单保持可见答案

【问题标题】：Bootstrap mega-menu, last drop-down stay visibleBootstrap 超级菜单，最后一个下拉菜单保持可见
【发布时间】：2015-08-27 15:06:05
【问题描述】：

我用 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，当点击输入选择日期时，日历显示，但drop-down 和form 在日历后面关闭。

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

Fiddle

【问题讨论】：

标签： jquery html css twitter-bootstrap-3 megamenu

【解决方案1】：

下拉菜单有这个默认问题。当单击<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>

【讨论】：

真的很欣赏这个例子，你是对的，但如果我只是删除 hover function 脚本，我不需要更改或做任何其他事情，一切都会奏效，但设计的全部目的就这样消失了保留hover function，但确保表单保持可见，即使用户将光标移到任何其他菜单上，它也会在表单顶部打开，因为只要光标移开其他菜单将关闭，但表单必须保持开放。
详细解答。不错。

【解决方案2】：

最后一个下拉菜单有表单，我正在尝试让它在页面加载时保持可见，并且它确实使用 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;
}

请注意，您可能需要更改 z-index（增加它以便如果它下面有任何内容，它会出现在正文内容上）和上面的选择器（使其更具体）取决于其他标记在您的页面中。

小提琴 - http://jsfiddle.net/ymxh5hru/

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

【讨论】：

呃...介意解释一下否决票吗？我错过了什么吗？
如果我反对它，我也会解释它，但不是我，如果我将 CSS 移动到选择器或保持它内联也没关系，它会产生相同的效果，是的，我同意删除 JS “淡出（和淡入）”将解决问题，但我不应该在这里问这个问题。我需要一个解决方法，让 JS 保持悬停功能，如果鼠标离开下拉菜单，表单也保持打开状态
淡出/淡入仅用于菜单动画吗？如果是这样，jsfiddle.net/20qhj5b4 会是你要找的吗？
正是我要找的，谢谢，你能不能也更新一下答案
完成，顺便说一句，通过不将搜索框归类为下拉菜单（只需从保持打开状态中删除类下拉菜单，您会得到一个公平的想法）并启用引导程序，这样做可能会更干净使用 CSS 动画在悬停时打开弹出窗口（请参阅stackoverflow.com/a/8878666/360067）。干杯！