html - Bootstrap 下拉菜单被删减

问题描述

我目前正在尝试使用引导下拉功能实现可滚动的侧边栏。这样当用户点击侧边栏项目时，菜单应该出现在右侧。我能够使可滚动部分正常工作，但是当菜单中的文本很长时，下拉菜单会被剪切。我尝试更改 z-index 以便下拉菜单出现在顶部，但这也不起作用。如果我从中删除overflow:auto它#sidebar可以按预期工作，但我希望侧边栏可以滚动，所以这overflow是必需的。密码笔

标签： htmlcsstwitter-bootstrapbootstrap-4

对于任何面临同样问题的人，我找到了一篇帮助我的文章：https ://css-tricks.com/popping-hidden-overflow/

因为如果垂直溢出是不可见的，我们就不能有可见的水平溢出，反之亦然。

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
        $submenuWrapper = $('> .wrapper', $menuItem);
    
    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();
    
    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
    });
  });
});

.wrapper {
     position: relative;
}
 ul {
     width: 200px;
     max-height: 250px;
     overflow-x: hidden;
     overflow-y: auto;
}
 li {
     position: static;
}
 li .wrapper {
     position: absolute;
     z-index: 10;
     display: none;
}
 li:hover > .wrapper {
     display: block;
}
 ul {
     margin: 1em;
     color: white;
     font-family: sans-serif;
     font-size: 16px;
}
 li {
     padding: 1em;
}
 li ul {
     margin: 0;
}
 li .wrapper {
     cursor: auto;
}
 li .wrapper li {
     padding: 0.5em;
}
 li:nth-child(2n) {
     background: #0e8ce0;
}
 li:nth-child(2n+1) {
     background: #0064b3;
}
 li.parent {
     background: #00b99b;
     cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li>Abc</li>
    <li>Def</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li class="parent">Mno >
      <div class="wrapper">
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
          <li class="parent">Mno >
            <div class="wrapper">
              <ul>
                <li>Abc</li>
                <li>Def</li>
                <li>Ghi</li>
                <li>Jkl</li>
                <li>Mno</li>
                <li>Pqr</li>
                <li>Stu</li>
                <li>Vw</li>
                <li>Xyz</li>
              </ul>
            </div>
          </li>
          <li>Pqr</li>
          <li>Stu</li>
          <li>Vw</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Pqr</li>
    <li>Stu</li>
    <li>Vw</li>
    <li>Xyz</li>
    <li class="parent">Abc >
      <div class="wrapper">
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
          <li>Mno</li>
          <li>Pqr</li>
          <li>Stu</li>
          <li>Vw</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Def</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li>Mno</li>
    <li>Pqr</li>
    <li>Stu</li>
    <li>Vw</li>
    <li>Xyz</li>
  </ul>
</div>

html - Bootstrap 下拉菜单被删减

问题描述

解决方案

推荐阅读