Question

我正在使用materializecss创建一个网页，我想同时使用模态和组合框，不幸的是，我很难同时工作。

无论出于何种原因，如果我使用此版本的materializecss＆＃39; javascript模式工作正常：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.js"></script>

但是，组合框并没有结合。它们出现但我无法打开它们并选择任何选项。

如果我使用我的本地副本，组合框工作正常，但模态不适用。

<script type="text/javascript" src="materialize/js/materialize.min.js"></script>

我的document.ready功能如下：

$(document).ready(function() {
    //$('.modal-trigger').leanModal();

    get_employee_data();
    populate_table_pagination();
    populate_table_of_employees();
    create_table_functions();
    $('.modal-trigger').leanModal();
    $('select').material_select();

    (function($) {
        $(function() {

            $('.button-collapse').sideNav();

        }); // end of document ready
    })(jQuery); // end of jQuery name space
});

我的HTML如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Add Employee View</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.js"></script>
    <style>
    #padding_left {
        width: 3%;
        float: left;
        height: 800px;
    }

    #something {
        width: 97%;
        margin-left: 3%;
        border-left: 0px solid gray;
        padding: 0em;
        height: 800px;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div class="row">
        <div class="input-field col s12">
            <select>
                <option value="" disabled selected>Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <label>Materialize Select</label>
        </div>
    </div>
    <nav>
        <div class="indigo nav-wrapper">
            <a href="#" class="right brand-logo">  Your company</a>
            <ul id="nav-mobile" class="left hide-on-med-and-down">
                <li><a href="addview.html">Add Employee</a></li>
                <li><a href="manageview.html">View Employees</a></li>
                <li><a class="waves-effect waves-light btn" href="#" data-activates="slide-out">Filtering</a></li>
                <li><a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a></li>
            </ul>
        </div>
    </nav>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
    <br>
    <div class="container">
        <div id="padding_left">
        </div>
        <div id="something">
            <div class="row">
                <div class="col s8">
                    <table>
                        <col width="80">
                        <col width="100">
                        <col width="130">
                        <col width="130">
                        <col width="100">
                        <col width="130">
                        <col width="80">
                        <thead>
                            <tr>
                                <th id="id_column_header">ID</th>
                                <th id="first_name_column_header">First Name</th>
                                <th id="last_name_column_header">Last Name</th>
                                <th id="activation_code_column_header">Activation Code</th>
                                <th id="role_column_header">Role</th>
                                <th id="department_column_header">Department</th>
                                <th id="registered_column_header">Registered?</th>
                            </tr>
                        </thead>
                        <tbody id="table_of_employees">
                        </tbody>
                    </table>
                </div>
            </div>
            <ul class="pagination" id="workers_page_numbers">
            </ul>
        </div>
        <div id="slide-out" class="side-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Sign In</a></li>
            <div class="input-field col s1">
                <select>
                    <option value="" selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label>Materialize Select</label>
            </div>
        </div>
    </div>
    </script>
    <script src="managecontroller.js"></script>
    <script src="managemodel.js"></script>
    <script src="employee.js"></script>
</body>

</html>

相互冲突的materializecss javascript文件

0 个答案: