代码之家  ›  专栏  ›  技术社区  ›  HDP

如何将引导程序5下拉菜单附加到特定元素。当下拉元素位于具有溢出的元素内时:隐藏

bootstrap-5 twitter-bootstrap jquery html javascript
  •  0
  • HDP  · 技术社区  · 4 年前

    我在用 Bootstrap 5 dropdown menu 猫头鹰旋转木马内。但是下拉列表被切断,因为它有外部div overflow:hidden 猫头鹰旋转木马。

    enter image description here

    在此处完成片段: 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>
    0 回复  |  直到 4 年前
        1
  •  3
  •   Gleb Kemarsky    4 年前

    为了避免更改转盘块的属性,添加额外的布局块,并使用 overflow 属性,我们可以将下拉菜单移到转盘之外。

    1. 这个 .each() method 浏览页面上的所有旋转木马;
    2. 这个 .on() method 用选择器附加一个委托事件处理程序,用于以后猫头鹰旋转木马可以创建的项目克隆中的事件;
    3. 这个 show.bs.dropdown event 调用show方法时立即激发;
    4. 这个 getInstance method 返回与DOM元素相关联的下拉实例;
    5. 这个 .insertAfter() method 在目标之后插入元素。

    在我们的情况下,下拉菜单将被移动,而不是复制:

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

    我认为我们不需要在关闭后将它们送回原来的位置。如果仍然需要这样做,那么可以通过与 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/[email protected]/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/[email protected]/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">
        2
  •  0
  •   Syed M Sohaib    4 年前

    使用jQuery在下拉列表中侦听事件以在元素处切换溢出类
    <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;
}
        3
  •  0
  •   Cesar Morillas    4 年前

    你在css中尝试过这个吗? 

    .owl-stage-outer {
  overflow: visible !important;  
}
        4
  •  0
  •   James    4 年前

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

    或者,如果您使用的是一个具有overflow隐藏属性的类,您可以对这个div进行异常处理。要做到这一点,请为您想要针对的特定div提供一个ID,现在添加overflow:visible!重要的到那个div。

        5
  •  0
  •   Tanim    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 ,这些在这里并不相关。我想让你注意到名为的班级- owl-stage-outer 。这是包含的CSS的类 overflow: hidden; 。这两个类- 猫头鹰舞台外 & owl-stage 生成自 猫头鹰旋转木马 .

    为了防止这种情况发生,您可以添加一个Bootstrap类 .overflow-visible 具有 猫头鹰舞台外 。自 猫头鹰舞台外 类不是硬代码标记,中有一个选项 owl-carousel doc 以自定义此类。见下图,它来自文档页面- enter image description here

    现在,可能会出现另一个问题,因为您添加了 .可见溢出 与一起上课 猫头鹰舞台外 这个 items 这应该在视野之外,其中一些现在将可见。为了防止这种情况发生,您需要更改一点标记并添加一行CSS。

    In this example ,你有 px-4 你的Bootstrap课程 main-wrapper id ,更改 px-4 到 mx-4 并添加的CSS overflow-x: hidden; 到 #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 .

    推荐文章
    Welshy1235  ·  在移动模式下引导导航栏不工作
    4 年前
    Kudafukuron  ·  为什么?导航栏深色不工作(Bootstrap v5.2)?
    4 年前
    Mickey Vershbow  ·  无法获取复选框的“checked”属性
    4 年前
    Amr El-Nagdy  ·  如何折叠导航栏onclick(bootstrap5)
    4 年前
    Kameron_Huggins  ·  无法在Bootstrap 5中更改<body>的字体系列吗?
    4 年前
    Wadu Hek  ·  引导汉堡图标与Navbar品牌不一致
    4 年前
    964  ·  移动站点略超出设备屏幕宽度
    4 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    4 年前
    Faizan Gigani  ·  导航栏向右滑动
    4 年前
    fightstarr20  ·  带固定边栏的Bootstrap 5布局-下表推送内容
    4 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号