如何将Bootstrap 5下拉菜单附加到特定元素。当DropDown元素位于具有Overflow：Hidden的元素内时

2022-08-25 00:00:00 jquery javascript html twitter-bootstrap bootstrap-5
我在owl-carousel中使用Bootstrap 5 dropdown menu。但下拉菜单被切断，因为owl-carousel中有外部divoverflow:hidden。

此处提供完整代码片段：jsfiddle

因此，我尝试定位相对于正文下拉列表，而不是<[3-3]，

中带边界选项的父项 Bootstrap Docs表示，这只能通过Java脚本完成(不能通过数据属性)，
所以我尝试了下面的Java脚本方法代码。但运气不佳。

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>

解决方案

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

  1. .each() method遍历页面上的所有旋转木马；
  2. 带有选择器的.on() method为来自Owl Carousel稍后可以创建的项克隆的事件附加委托事件处理程序；
  3. 调用show方法时立即触发show.bs.dropdown event；
  4. getInstance method返回与DOM元素关联的DropDown实例；
  5. .insertAfter() method在目标之后插入元素。

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

如果以这种方式选择的元素被插入到DOM中其他位置的单个位置，则它将移动到目标(未克隆)之后，并返回由插入的元素组成的新集合

我认为我们不需要在关闭后将它们恢复到原来的位置。如果仍需要此操作，则可以通过与hidden.bs.dropdown事件类比来完成此操作。

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

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假"> 
$(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">

相关文章