实体化css模式不起作用

materialize css modal not working

本文关键字：不起作用 模式 css 实体化      更新时间：2023-09-26

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

出于某种原因，我没能在第五个选项之后选择任何东西。这是照片。我不知道为什么我不能选择第五个选项（Terrengan u）之后的任何内容。

单击吉兰丹时，上一个选定的值不会更新为该值，而吉兰丹以上的任何值都有效。

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

<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

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

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

问题是，当模式高度超过父元素的高度时，选择框选项不会在DOM中注册，从而导致最初未呈现的选项无法选择。。。因此，即使我们点击了选项，点击也不会被注册，选项也不会被选中。

要解决此问题，您可以使用下拉列表而不是选择框，或者如果可以的话，继续使用浏览器默认的选择框。

看起来像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>

Fiddle：http://jsfiddle.net/8rmjymtr/9/

适用于更新的实体化版本。在Chrome最新版本上使用Materialize v0.97.5进行本地测试。

相关文章：