Question

看看这个JSfiddle。

按预期，根菜单会在鼠标悬停时展开。但是子项没有。

如果您从<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>部分中删除<head>，则确实可以使用。

是什么原因导致此冲突，如何解决？

Answer 1

替换与下面相同的jQuery类：

$(function(){
        $('ul#menu li').hover(function(){
            //$('#drop' , this).css('display','block');
             $(this).children('ul').show();
        }, function(){
             $(this).children('ul').hide();
        });
    });

Answer 2

overflow样式会产生问题，引导默认行为是单击或悬停时在元素中应用overflow: hidden但要添加子菜单时展开，因此，需要添加CSS

ul#menu > li ul.drop {
    overflow: visible !important;
}

!important是必需的，因为通过overflow添加了inline条件

更新字段：http://jsfiddle.net/7f38r41z/

$(function(){
    $('ul#menu li').hover(function(){
        //$('#drop' , this).css('display','block');
         $(this).children('ul').slideDown(0);
    }, function(){
         $(this).children('ul').delay(0).slideUp(0);
    });
});

ul#menu {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
}

ul#menu > li {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

ul#menu a {
    text-decoration: none;
    color: #222;
    background: #ccc;
    display: block;
    padding: 10px;
}

ul#menu a:hover {
    text-decoration: none;
    color: #00f;
    background: #ff8;
    display: block;
    padding: 10px;
}

ul#menu > li ul.drop {
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    display: none;
    overflow: visible !important;
}

ul#menu > li ul.drop ul {
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    display: none;
    left: 150px;
    top: 0;
}

ul#menu > li ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
  </head>
  <body>
    <div class="row">
      <div class="col-lg-12">
        <ul id="menu">
          <li><a href="#">Home</a>
            <ul class="drop">
              <li><a href="#">About us</a></li>
              <li>
                <a href="#">About us ></a>
                <ul>
                  <li><a href="#">Sub Item 1</a></li>
                  <li>
                    <a href="#">Sub Item 2 ></a>
                    <ul>
                      <li><a href="#">Sub item 3</a></li>
                      <li><a href="#">Sub item 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">About</a>
            <ul class="drop">
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <h3>
          Page title
        </h3>
        <p>
          Page contents
        </p>
      </div>
    </div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</body>
</html>

与Bootstrap 4配合使用的jQuery下拉菜单

2 个答案: