如何防止下拉选项从 css 中的其他下拉菜单中隐藏？

Question

下面是下拉菜单的两个图像。我在同一页面的每个和内部都有几个下拉菜单。单击下拉菜单时，它的所有选项都会被触发，但最后一个选项会在另一个 select 下拉菜单选项下受到阻碍。（参考：图片 2）如何预防？相应下拉菜单的 3 个选项是：Profile、Word、Hashtag。标签选项受到阻碍。在此处查看完整代码：Codepen

图片 1

图 2

我正在尝试这个代码：

    $(".custom-select").each(function() {
      var classes = $(this).attr("class"),
          id      = $(this).attr("id"),
          name    = $(this).attr("name");
      var template =  '<div class="' + classes + '">';
          template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
          template += '<div class="custom-options">';
          $(this).find("option").each(function() {
            template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
          });
      template += '</div></div>';
      
      $(this).wrap('<div class="custom-select-wrapper"></div>');
      $(this).hide();
      $(this).after(template);
    });
    $(".custom-option:first-of-type").hover(function() {
      $(this).parents(".custom-options").addClass("option-hover");
    }, function() {
      $(this).parents(".custom-options").removeClass("option-hover");
    });
    $(".custom-select-trigger").on("click", function() {
      $('html').one('click',function() {
        $(".custom-select").removeClass("opened");
      });
      $(this).parents(".custom-select").toggleClass("opened");
      event.stopPropagation();
    });
    $(".custom-option").on("click", function() {
      $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
      $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
      $(this).addClass("selection");
      $(this).parents(".custom-select").removeClass("opened");
      $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
    });

    body {
      background: #ededed;
      font-family: 'Open Sans', sans-serif;
    }
    .center {
      position: absolute;
      display: inline-block;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /** Custom Select **/
    .custom-select-wrapper {
      position: relative;
      display: inline-block;
      user-select: none;
    }
      .custom-select-wrapper select {
        display: none;
      }
      .custom-select {
        position: relative;
        display: inline-block;
      }
        .custom-select-trigger {
          position: relative;
          display: block;
          width: 230px;
          padding: 0 84px 0 22px;
          font-size: 20px;
          font-weight: 300;
          color: #fff;
          line-height: 40px;
          background: #265a88;
          border-radius: 4px;
          cursor: pointer;
        }
          .custom-select-trigger:after {
            position: absolute;
            display: block;
            content: '';
            width: 10px; height: 10px;
            top: 50%; right: 25px;
            margin-top: -3px;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #fff;
            transform: rotate(45deg) translateY(-50%);
            transition: all .4s ease-in-out;
            transform-origin: 50% 0;
          }
          .custom-select.opened .custom-select-trigger:after {
            margin-top: 3px;
            transform: rotate(-135deg) translateY(-50%);
          }
      .custom-options {
        position: absolute;
        display: block;
        top: 100%; left: 0; right: 0;
        min-width: 100%;
        margin: 15px 0;
        border: 1px solid #b5b5b5;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow: 0 2px 1px rgba(0,0,0,.07);
        background: #fff;
        transition: all .4s ease-in-out;
        
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-15px);
      }
      .custom-select.opened .custom-options {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateY(0);
      }
        .custom-options:before {
          position: absolute;
          display: block;
          content: '';
          bottom: 100%; right: 25px;
          width: 7px; height: 7px;
          margin-bottom: -4px;
          border-top: 1px solid #b5b5b5;
          border-left: 1px solid #b5b5b5;
          background: #fff;
          transform: rotate(45deg);
          transition: all .4s ease-in-out;
        }
        .option-hover:before {
          background: #f9f9f9;
        }
        .custom-option {
          position: relative;
          display: block;
          padding: 0 22px;
          border-bottom: 1px solid #b5b5b5;
          font-size: 18px;
          font-weight: 600;
          color: #b5b5b5;
          line-height: 47px;
          cursor: pointer;
          transition: all .4s ease-in-out;
        }
        .custom-option:first-of-type {
          border-radius: 4px 4px 0 0;
        }
        .custom-option:last-of-type {
          border-bottom: 0;
          border-radius: 0 0 4px 4px;
        }
        .custom-option:hover,
        .custom-option.selection {
          background: #f9f9f9;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
        <option value="profile">Profile</option>
        <option value="word">Word</option>
        <option value="hashtag">Hashtag</option>
      </select>

Answer 1

您可以通过两种方式解决：

第一个是在 css 中设置 z-index，例如：.custom-options{z-index: 1;}
第二个是设置位置，如：.custom-options{position: relative;}

第一个解决方案将使窗帘出现在另一个元素上方，第二个解决方案将默认保留 space 以使其正确显示（即使窗帘关闭）

如何防止下拉选项从 css 中的其他下拉菜单中隐藏？

How to prevent Dropdown options getting hidden from the other dropdown menu in css?

html

javascript

css

jquery

handlebars.js