Question

我有一个下拉菜单，其中有另一个下拉菜单，我添加了一些Jquery代码以在悬停时打开/关闭两个下拉菜单。

我将鼠标悬停在主下拉列表@Repository public class ACustomRepository { @PersistenceContext private EntityManager entityManager; }上，然后将鼠标悬停在另一个下拉列表services上，当我尝试转到其中的元素service2时，Service2 sub1下拉列表已关闭。

代码如下：

HTML：

Service2 sub2

jQuery：

<div class="navbar navbar-default navbar-static-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Service1</a></li>
                    <li role="presentation">
                    <a data-toggle="collapse" href="#collapse" class="sub-menu">
                        Service2 <b class="caret"></b>
                    </a></li>
                    <ul>
                    <div id="collapse" class="panel-collapse collapse">
                        <li role="presentation"><a href="#">Service2 sub1</a></li>
                        <li role="presentation"><a href="#">Service2 sub2</a></li>
                    </div>
                    </ul>
                </ul>
            </li> <!-- .dropdown -->
        </ul> <!-- .navbar-nav -->
    </div> <!-- .container -->
</div> <!-- .navbar -->

她是一个测试https://jsfiddle.net/0ksz9tnL/的小提琴

Answer 1

首先，我想指出您的HTML无效，您在<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid colBackgrounds"> <div class="row"> <div class="container text-center"> <div class="row"> <div class="col-6"> This is the content for the left column </div> <div class="col-6"> This is the content for the right column </div> </div> </div> </div> </div>内有ul

在这里查看：

ul

第二，如果您只是将类<ul class="dropdown-menu"> <li><a href="#">Service1</a></li> <li role="presentation"> <a data-toggle="collapse" href="#collapse" class="sub-menu"> Service2 <b class="caret"></b> </a></li> <ul>从sub-menu移到它的父类，那么它就可以正常工作。

工作演示

<a data-toggle="collapse" href="#collapse" class="sub-menu">

$(document).ready(function() {

  //Stop propagation for the dropdown
  $(document).on('click', '.dropdown-menu', function(e) {
    e.stopPropagation();
  });

  //On hovering over the main menu 'Services'
  $(".dropdown").hover(
    function() {
      $('.dropdown-menu', this).stop().fadeIn("fast");
      $(this).addClass('active');
    },
    function() {
      $('.dropdown-menu', this).stop().fadeOut("fast");
      $(this).removeClass('active');
    }
  );

  //On hovering over the sub-menu `Services`
  $(".sub-menu").hover(
    function() {
      $('#collapse').removeClass('collapse').addClass('collapse in');
    },
    function() {
      $('#collapse').removeClass('collapse in').addClass('collapse');
    }
  );

});

悬停时，Boostrap下拉菜单关闭

1 个答案: