文章/答案/技术大牛

发布

社区首页 >问答首页 >Z-Index与Slim Select可折叠Div中的溢出

问Z-Index与Slim Select可折叠Div中的溢出
EN

Stack Overflow用户

提问于 2019-02-27 12:49:35

回答 2查看 672关注 0票数 0

我已经创建了一个示例，将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链接，查看完整的超文本标记语言和附带的CSS/Javascript。)

当我展开这两个部分并展开Slim Select下拉列表时，我只能看到前几个Slim Select选项"Value 1“到"Value 3”。我看不到"Value 4“到"Value 6”，除非我点击并按住鼠标按钮，这显然不是我想要的行为。

我已经尝试改变所有组件的z索引，但都没有成功。我相信这可能是因为Slim Select创建了一个我还没有弄清楚的z索引“堆叠上下文”。

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

html

css

overflow

z-index

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-27 13:56:24

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

.active + .content {
  overflow: visible;
}

票数 1

Stack Overflow用户

发布于 2019-02-27 13:26:29

我已经更新了你的代码，现在你可以看到"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: '\002B';
            color: white;
            font-weight: bold;
            float: right;
            margin-left: 5px;
        }

        .active::after {
            content: "\2212";
        }

        .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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54898231

复制

相似问题

问Z-Index与Slim Select可折叠Div中的溢出
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Z-Index与Slim Select可折叠Div中的溢出EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Z-Index与Slim Select可折叠Div中的溢出
EN