Z-Index 与 Collapsible Div with Slim Select 中的 Overflow

Question

我举了一个例子，将 Slim Select 下拉菜单放置在一个简单的可折叠 div 中： https://codepen.io/wbraswell/pen/gEbdoX

<html>
<head>
    <!-- MULTIPLE SELECT DROPDOWNS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.css"></link>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.js"></script>    
</head>    
<body>    
    <button class="collapsible">My Collapsible Div</button>
      <div class="content" style="z-index: 900;">    
        <select id="my_MSD" multiple>
          <option value="value 1">Value 1</option>
          <option value="value 2">Value 2</option>
          <option value="value 3">Value 3</option>
          <option value="value 4">Value 4</option>
          <option value="value 5">Value 5</option>
          <option value="value 6">Value 6</option>
        </select>    
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
      </div>    
    <button class="collapsible">Another Collapsible Div</button>
    <div class="content" style="z-index: 800;">
        Howdy<br>
    </div>
    </body>
 </html>

（请参阅上面的 CodePen.io link 以获得完整的 HTML 和随附的 CSS/Javascript。）

当我展开两个部分并展开 Slim Select 下拉菜单时，我只能看到前几个 Slim Select 选项 "Value 1" 到 "Value 3"。我无法通过 "Value 6" 看到 "Value 4" 除非我单击并按住鼠标按钮，这显然不是所需的行为。

我已尝试更改所有组件的 z-index，但没有成功。我相信这可能是由于 Slim Select 创建了一个我还没有弄清楚的 z-index "stacking context"。

在我的示例中，如何才能简单地看到 "Value 1" 到 "Value 6" 的所有内容？

Answer 1

我已经更新了您的代码，现在您可以看到 "Value 1" 到 "Value 6" 的所有内容。

我在 .ss-main .ss-content.ss-open 上添加了 css 并且还添加了 js

希望对您有所帮助。

$(document).ready(function(){
  $(".ss-multi-selected").click(function(){
    $(this).closest('.content').css("max-height", "inherit");
  });
});

            window.onload=function(){

// BEGIN CODE, MULTIPLE SELECT DROPDOWNS

var my_MSD_object = new SlimSelect({
    select: '#my_MSD',
    closeOnSelect: false,
});

// END CODE, MULTIPLE SELECT DROPDOWNS

// BEGIN CODE, COLLAPSIBLE SECTIONS

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        }
        else {
            content.style.maxHeight = content.scrollHeight + "px";
        } 
    });
}

// END CODE, COLLAPSIBLE SECTIONS 

};

        /* BEGIN STYLE, COLLAPSIBLE SECTIONS */

        .collapsible {
            background-color: #777;
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }

        .active, .collapsible:hover {
            background-color: #555;
        }

        .collapsible::after {
            content: '[=11=]2B';
            color: white;
            font-weight: bold;
            float: right;
            margin-left: 5px;
        }

        .active::after {
            content: "12";
        }

        .content {
            padding: 0 18px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            background-color: #f1f1f1;
        }


        .content:active {
            overflow: visible;
        }

        /*css add below*/
        .ss-main .ss-content.ss-open {
            position: relative;
        }

        /* END STYLE, COLLAPSIBLE SECTIONS */

<html>

<head>

    <!-- MULTIPLE SELECT DROPDOWNS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.css"></link>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <button class="collapsible">My Collapsible Div</button>
    <div class="content" style="z-index: 900;">

        <select id="my_MSD" multiple>
            <option value="value 1">Value 1</option>
            <option value="value 2">Value 2</option>
            <option value="value 3">Value 3</option>
            <option value="value 4">Value 4</option>
            <option value="value 5">Value 5</option>
            <option value="value 6">Value 6</option>
        </select>

        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>

        <br>------------------------------------------------------------  <!-- NEED FIX WIDTH & SPACING ISSUES -->
    </div>

    <button class="collapsible">Another Collapsible Div</button>
    <div class="content" style="z-index: 800;">
        Howdy<br>
        Howdy<br>
        Howdy<br>
        <br>------------------------------------------------------------  <!-- NEED FIX WIDTH & SPACING ISSUES -->
    </div>




    </body>
 </html>

Answer 2

下拉值是隐藏的，因为我们将 overflow: hidden 设置为内容 div。要查看所有值，请使 'content' div 前面有 'active' 元素的溢出可见。添加以下 CSS 以及您的代码。

.active + .content {
  overflow: visible;
}

Z-Index 与 Collapsible Div with Slim Select 中的 Overflow

Z-Index vs Overflow in Collapsible Div with Slim Select

html

css

z-index

overflow