物化CSS模式不起作用

Posted 2023-02-22

【中文标题】物化CSS模式不起作用

【英文标题】：materialize css modal not working

【发布时间】：2016-03-11 18:11:41

【问题描述】：

我正在使用 Materialize CSS 并使用可折叠的手风琴样式元素 (http://materializecss.com/collapsible.html)。

出于某种原因，在第 5 个选项之后我无法选择任何内容。 Here is the picture.我不知道为什么我在第五个选项（Terrengan u）之后不能选择任何东西。

当 Kelantan 被点击时，之前选择的值不会更新为它，而 Kelantan 以上的任何东西都可以工作。

这是我的代码。我的目标只是能够按预期使用可折叠（即元素打开并保持打开）。

<div class="modal">
    <div class="input-field col s4 m6 l12">
        <select class="icons">
            <option value="" disabled selected>Choose your state</option>
            <option value="" data-icon="images/flag/perlis.jpg" class="left circle responsive-img">Perlis</option>
            <option value="" data-icon="images/flag/kedah.jpg" class="left circle responsive-img">Kedah</option>
            <option value="" data-icon="images/flag/penang.jpg" class="left circle responsive-img">Pulau Pinang</option>
            <option value="" data-icon="images/flag/perak.jpg" class="left circle responsive-img">Perak</option>
            <option value="" data-icon="images/flag/terrenganu.jpg" class="left circle responsive-img">Terenggan    u</option>
            <option value="" data-icon="images/flag/kelantan.jpg" class="left circle responsive-img">Kelantan</option>
            <option value="" data-icon="images/flag/pahang.jpg" class="left circle">Pahang</option>
            <option value="" data-icon="images/flag/selangor.jpg" class="left circle">Selangor</option>
            <option value="" data-icon="images/flag/sembilan.jpg" class="left circle">Sembilan</option>
            <option value="" data-icon="images/flag/malacca.jpg" class="left circle">Malaka</option>
            <option value="" data-icon="images/flag/johor.jpg" class="left circle">Johor</option>
            <option value="" data-icon="images/flag/sarawak.jpg" class="left circle">Sarawak</option>
            <option value="" data-icon="images/flag/sabah.jpg" class="left circle">Sabah</option>
        </select>
        <label>Select State</label>
    </div>
</div>

JS

<script type="text/javascript">
    $(document).ready(function()
        $('select').material_select();
    );
</script>

JSFiddle：http://jsfiddle.net/8rmjymtr/5/

我发现另一个帖子也有同样的问题。 https://github.com/Dogfalo/materialize/issues/2436

【问题讨论】：

那么，嗯...你的可折叠设备在哪里？和这个选择框有什么关系？

对不起，我的错。它在模态中不可调用

如果您可以在 jsfiddle 或其他东西上重现您的问题，以便人们可以修补它，那就更好了。您粘贴的 html 是完全正常的，并没有说明问题。意外行为很可能是由于文档的其他部分造成的。

嗨。这是 jsfiddle 的链接。谢谢jsfiddle.net/8rmjymtr/5

好的，我可以确认这是图书馆的问题。能够在图书馆网站本身上重现该错误。您可以将错误报告给开发人员：github.com/Dogfalo/materialize/issues。不幸的是，我没有足够的工具来深入研究这台笔记本电脑。

【参考方案1】：

我刚刚检查了小提琴。在我看来，问题出在选择框上。如果您将选择框类更改或添加到浏览器默认值。小提琴很好用。

 <select class="icons browser-default"> // this line

问题是当模态高度超过父元素的高度时，选择框选项未注册到 DOM，从而导致最初未呈现的选项不可选择... 所以即使我们点击选项，点击也不会被注册并且选项也不会被选中。

要解决此问题，您可以使用drop-down 代替选择框，或者继续使用浏览器默认选择框（如果可以的话）。

【参考方案2】：

似乎是 Materialize v0.97.3 中的一个错误。 这是 Materialize v0.97.5 的小提琴。

<div class="modal">
    <div class="input-field col s4 m6 l12">
        <select class="icons">
            <option value="" disabled selected>Choose your state</option>
            <option value="" data-icon="images/flag/perlis.jpg" class="left circle responsive-img">Perlis</option>
            <option value="" data-icon="images/flag/kedah.jpg" class="left circle responsive-img">Kedah</option>
            <option value="" data-icon="images/flag/penang.jpg" class="left circle responsive-img">Pulau Pinang</option>
            <option value="" data-icon="images/flag/perak.jpg" class="left circle responsive-img">Perak</option>
            <option value="" data-icon="images/flag/terrenganu.jpg" class="left circle responsive-img">Terenggan    u</option>
            <option value="" data-icon="images/flag/kelantan.jpg" class="left circle responsive-img">Kelantan</option>
            <option value="" data-icon="images/flag/pahang.jpg" class="left circle">Pahang</option>
            <option value="" data-icon="images/flag/selangor.jpg" class="left circle">Selangor</option>
            <option value="" data-icon="images/flag/sembilan.jpg" class="left circle">Sembilan</option>
            <option value="" data-icon="images/flag/malacca.jpg" class="left circle">Malaka</option>
            <option value="" data-icon="images/flag/johor.jpg" class="left circle">Johor</option>
            <option value="" data-icon="images/flag/sarawak.jpg" class="left circle">Sarawak</option>
            <option value="" data-icon="images/flag/sabah.jpg" class="left circle">Sabah</option>
        </select>
        <label>Select State</label>
    </div>
</div>

JS

<script type="text/javascript">
    $(document).ready(function()
        $('select').material_select();
    );
</script>

小提琴： http://jsfiddle.net/8rmjymtr/9/

适用于更新的物化版本。在 Chrome 上使用 Materialise v0.97.5 进行本地测试。