Question

我正在使用materialize css。我创建了一个选项卡并将select元素放入其中。但是在选择element之后它没有关闭。我正在使用materialize 0.98。

如果我把它放在标签之外，那就可以了。

这是我的代码：

My Scrtipt

<script>
        $(document).ready(function(e) {
            $('ul.tabs').tabs({'swipeable': true});
            $("select").material_select();
        });
    </script>

Html代码：

<div class="main mainContentMargin">
            <div class="row">
                <!-- This will Work-->
                <div class="col s12 input-field">
                    <select id="company_select1" name="company_select1">
                        <option value="-1" selected>Select Company</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                    <label>Select Company</label>
                </div>
            </div>
            <div class="row">
                <div class="card col s12 medium">
                    <ul id="tabs-swipe-demo" class="tabs tabs-fixed-width" style="margin-bottom: 1%">
                        <li class="tab col s6"><a href="#test-swipe-1">To Supplier</a></li>
                        <li class="tab col s6"><a href="#test-swipe-2">Using Product</a></li>
                    </ul>
                    <div id="test-swipe-1" class="col s12">
                        <!-- This will Work but not closing the dropdown-->
                        <div class="row">
                            <div class="col s12 input-field">
                                <select id="company_select" name="company_select">
                                    <option value="-1" selected>Select Company</option>                                                                                 
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                </select>
                                <label>Select Company</label>
                            </div>
                        </div>
                    </div>
                    <div id="test-swipe-2" class="col s12">

                    </div>
                </div>
            </div>
        </div>

Answer 1

Dropdown未关闭，因为我们使标签可以滑动。这就是选项卡捕获下拉点击事件的原因。

我只是在下拉列表中将stopPropogation选项设置为true并且它可以正常工作

$(document).ready(function(e) {
    $('ul.tabs').tabs({'swipeable': true});
    $("select").material_select({"stopPropagation":true});
});

实现CSS选择元素后选择不关闭

1 个答案: