如何将 bootstrap 5 下拉菜单附加到特定元素。当下拉元素位于溢出元素内时：隐藏

Question

我在 owl-carousel 中使用 Bootstrap 5 dropdown menu。但是下拉菜单被切断了，因为在 owl-carousel.

中有外部 div overflow:hidden

这里是完整的片段： jsfiddle

因此，我尝试将下拉菜单相对于正文定位，而不是具有来自 Bootstrap Docs、

的边界选项的父项

Bootstrap 文档说只能通过 javascript 完成（而不是通过数据属性），
所以我尝试了下面的 javascript 方法代码。但运气不好。

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
      return new bootstrap.Dropdown(dropdownToggleEl, {
        boundary: document.querySelector('#main-wrapper')
      })
    })

对于我出错的地方的适当解决方案的任何建议将不胜感激。

我们的HTML代码：

<div id="main-wrapper">
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="d-flex align-items-center">
      <h4>Shilipp Sotocnik</h4>
      
      <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
      <a href="#" role="button" id="dropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu1">
          <li><a class="dropdown-item" href="#">Link 1</a></li>
          <li><a class="dropdown-item" href="#">Link 2</a></li>
          <li><a class="dropdown-item" href="#">Link 3</a></li>
          <li><a class="dropdown-item" href="#">Link 4</a></li>
        </ul>
      </div>
      
    </div>
  </div>
</div>
</div>

Answer 1

使用 jQuery 监听下拉菜单事件以在元素处切换溢出 class
<div class="owl-stage-outer">.

$('a[data-bs-toggle="dropdown"]').on('show.bs.dropdown', function () {
    $(".owl-stage-outer").addClass("overflow_none");
})

$('a[data-bs-toggle="dropdown"]').on('hide.bs.dropdown', function () {
    $(".owl-stage-outer").removeClass("overflow_none");
})

.overflow_none  {
  overflow: unset !important;
}

Answer 2

你在css试过这个吗？

.owl-stage-outer {
  overflow: visible !important;  
}

Answer 3

隐藏的溢出属性真的需要存在吗？

或者，如果您使用的 class 具有溢出隐藏属性，您可以将此 div 作为例外。为此，请为您要定位的特定 div 提供一个 ID，现在添加 overflow: visible !important; div.

Answer 4

这是激活 owl-carousel 时实际发生的情况，请参阅下面的标记 -

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
</div>

我不会谈论 dots 或 nav，这些与这里无关。我想提请您注意名为 class 的 owl-stage-outer。这是包含 overflow: hidden; 的 CSS 的 class。这 2 classes- owl-stage-outer & owl-stage 是从 owl-carousel.

生成的

为防止这种情况，您可以添加 Bootstrap class .overflow-visible 和 owl-stage-outer。由于 owl-stage-outer class 不是 hard-code 标记，因此 owl-carousel doc to customize this class. See the picture below, it's from the doc page-

中有一个选项

现在，可能会出现另一个问题，因为您添加了 .overflow-visible class 和 owl-stage-outer，items 应该在视图之外，其中一些会现在可见。为防止这种情况，您需要更改一点标记并添加一行 CSS.

In this example，你的main-wrapperid中有px-4Bootstrapclass，将px-4改为mx-4 并将 overflow-x: hidden; 的 CSS 添加到 #main-wrapper

就是这样，这可以帮助您解决问题。 Here is the live fixed version 我想说的，祝你好运。

更新

由于我们的 current example 在触发下拉菜单时有一个滚动条，我只对 CSS 做了一些更改-

body {overflow-x: hidden;}

#main-wrapper .owl-item {
    visibility: hidden;
    opacity: 0;
}

#main-wrapper .owl-item.active {
    visibility: visible;
    opacity: 1;
}

Here is the live example.

Answer 5

为了避免更改轮播块的属性、添加额外的布局块以及使用 overflow 属性，我们可以将下拉菜单移到轮播之外。

.each() method 遍历页面上的所有轮播；
带有选择器的 .on() method 为 Owl 轮播稍后可以创建的项目克隆事件附加一个委托事件处理程序；
调用 show 方法时 show.bs.dropdown event 立即触发；
getInstance method return 与 DOM 元素关联的下拉列表实例；
.insertAfter() method 在目标之后插入元素。

在我们的例子中，下拉菜单将被移动，而不是被复制：

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved after the target (not cloned) and a new set consisting of the inserted element is returned

而且我认为我们不需要在关闭后将它们 return 放回原来的位置。如果仍然需要，那么可以类推hidden.bs.dropdown事件。

https://jsfiddle.net/glebkema/s0yua1w7/

$(function() {

  $('.owl-carousel')
    .each(function() {
      let carousel = $(this);
      carousel.on('show.bs.dropdown', '[data-bs-toggle=dropdown]', function() {
        // universal solution
        let dropdown = bootstrap.Dropdown.getInstance(this);
        $(dropdown._menu).insertAfter(carousel);

                // alternative for this particular layout
        // $(this).next('.dropdown-menu').insertAfter(carousel);
      });
    })
    .owlCarousel({
      loop:true,
      margin:15,
      nav:true,
    });

});

<div class="py-5 mx-4">

  <h2>First Owl Carousel</h2>

  <div class="owl-carousel owl-theme">
    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 1</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu1">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>

    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 2</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu2">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
            <li><a class="dropdown-item" href="#">Link 7</a></li>
            <li><a class="dropdown-item" href="#">Link 8</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>

    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 3</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu3">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
            <li><a class="dropdown-item" href="#">Link 7</a></li>
            <li><a class="dropdown-item" href="#">Link 8</a></li>
            <li><a class="dropdown-item" href="#">Link 9</a></li>
            <li><a class="dropdown-item" href="#">Link 10</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>

    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 4</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu4">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
            <li><a class="dropdown-item" href="#">Link 7</a></li>
            <li><a class="dropdown-item" href="#">Link 8</a></li>
            <li><a class="dropdown-item" href="#">Link 9</a></li>
            <li><a class="dropdown-item" href="#">Link 10</a></li>
            <li><a class="dropdown-item" href="#">Link 11</a></li>
            <li><a class="dropdown-item" href="#">Link 12</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>
  </div>

  <h2>Second Owl Carousel</h2>

  <div class="owl-carousel owl-theme">
    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 1</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu21" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu21">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>

    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 2</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu22" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu22">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
            <li><a class="dropdown-item" href="#">Link 7</a></li>
            <li><a class="dropdown-item" href="#">Link 8</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>

    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 3</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu23" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu23">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
            <li><a class="dropdown-item" href="#">Link 7</a></li>
            <li><a class="dropdown-item" href="#">Link 8</a></li>
            <li><a class="dropdown-item" href="#">Link 9</a></li>
            <li><a class="dropdown-item" href="#">Link 10</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>

    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 4</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu24" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu24">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
            <li><a class="dropdown-item" href="#">Link 7</a></li>
            <li><a class="dropdown-item" href="#">Link 8</a></li>
            <li><a class="dropdown-item" href="#">Link 9</a></li>
            <li><a class="dropdown-item" href="#">Link 10</a></li>
            <li><a class="dropdown-item" href="#">Link 11</a></li>
            <li><a class="dropdown-item" href="#">Link 12</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt doloribus ipsa at culpa fugit nesciunt nulla rem inventore eum perspiciatis assumenda ipsam aut architecto unde laboriosam totam fuga in, dolore.</p>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

如何将 bootstrap 5 下拉菜单附加到特定元素。当下拉元素位于溢出元素内时：隐藏

How to append the bootstrap 5 dropdown menu to a specific element. when the dropdown element is inside an element with overflow: hidden

html

javascript

jquery

twitter-bootstrap

bootstrap-5

更新