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，点击输入以选择日期时，日历显示的是drop-down，form后面的日历会自动关闭。< / p>

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

Fiddle

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

最后一个菜单下拉列表有形式，我尝试在页面加载时保持可见，并且使用style =＆＃34; display：block！important＆＃34;

您需要排除＆＃39; stayopen＆＃39;悬停规则中的元素

$('.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/

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

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

2 个答案: