Materialise CSS - 可折叠和日期输入

Question

我在使用 materialize collapsible 和日期选择器时遇到问题。可折叠甚至不会在点击时打开，日期选择器也不会打开。放置在个人详细信息中的日期选择器 - 可折叠项目。有人请帮我修复可折叠和日期选择器。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Placements  MGIT</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <!-- If CDN not available, loading JQuery from Server-->
    <script>
        if (!window.jQuery) {
            document.write('<script src="/js/jquery.min.js"><\/script>');
        }
    </script>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="/js/materialize.min.js"></script>
</head>


<body>

    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo right">MGIT Placements</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">M</i></a>
            <ul class="left hide-on-med-and-down">
                <li class="active"><a href="#">Login</a></li>
                <li><a href="/student_reg">Register</a></li>
                <li><a href="#">Upcoming</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/student_lgn">Login</a></li>
                <li><a href="/student_reg">Register</a></li>
                <li><a href="#">Upcoming</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>


    <div class="row">
        <div class="student-profile">
            <div class="col l8 offset-l2 m10 offset-m1">

                    <ul class="collapsible" popout" data-collapsible="accordion">
                        <li>
                            <div class="collapsible-header">Pefrsonal Info</div>
                            <div class="collapsible-body">
                                <div id="personal">
                                    <div class="card black-text">
                                        <div class="input-field col s12 m4 l4">
                                            <input type="text" id="firstname" />
                                            <label for="firstname">First Name:</label>
                                        </div>
                                        <div class="input-field col s12 l4 m4">
                                            <input type="text" id="lastname" />
                                            <label for="lastname">Last Name:</label>
                                        </div>
                                        <div class="input-field col s12 l4 m4">
                                            <input type="text" id="surname" />
                                            <label for="surname">Surname:</label>
                                        </div>
                                        <div class="input-field col s12 m6 l6">
                                            <input type="text" id="father" />
                                            <label for="father">Father Name:</label>
                                        </div>
                                        <div class="input-field col s12 l6 m6">
                                            <input type="text" id="mother" />
                                            <label for="mother">Mother Name:</label>
                                        </div>
                                        <div class="input-field col s12 m6 l6">
                                            <input type="date" class="datepicker" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="collapsible-header">Academics Info</div>
                            <div class="collapsible-body"> Acaademics Should be here</div>
                        </li>

                        <li>
                            <div class="collapsible-header">Change Password</div>
                            <div class="collapsible-body">Password Change Shoule be here</div>
                        </li>

                        <li>
                            <div class="collapsible-header">View Data </div>
                            <div class="collapsible-body" id="dynamicdata">View Data</div>
                        </li>

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




    <style type="text/css">
            <style type="text/css">
        body {
            background-color: #FCFCFC;
        }
        nav{
            background-color: #33597C;
        }
        .updates{
            position: absolute;
            padding: 20px;
            background: transparent;
        }
        marquee{
            padding: 20px;
        }
        .vline{
            width: 1px;
            position: absolute;
            background-color: orange;
        }
        .vline.medium{
            top: initial;
            height: 420px;
        }
        .small-login{
            padding: 20px;
        }
        .login-fields{
            padding: 20px;
        }
        h6{
            color: #33597C;
        }
        h2 {
            color: grey;
        }
        /*   #4A6787 ; #33597C;     */


        .login-bg {
            margin-top: 5%;
        }
        #message {         
            color: red;
            margin: 20px;
        }
        #lgn_btn{
            top: 20px;
            background-color: #33597C;
            width: 60%;
        }
        /* label focus color */
       .input-field input[type=text]:focus + label {
         color: #1A237E;
       }
       /* label underline focus color */
       .input-field input[type=text]:focus {
         border-bottom: 1px solid #1A237E;
         box-shadow: 0 1px 0 0 #1A237E;
       }
       /* label focus color */
       .input-field input[type=password]:focus + label {
         color: #1A237E;
       }
       /* label underline focus color */
       .input-field input[type=password]:focus {
         border-bottom: 1px solid #1A237E;
         box-shadow: 0 1px 0 0 #1A237E;
       }
    </style>

    <script type="text/javascript">
        jresp = '{% autoescape off%}{{jresp}}{% endautoescape%}';
        resp = JSON.parse(jresp);
        rollno = resp['rollno'];
        details = resp['data'];        
        var update = document.getElementById('dynamicdata')
        for (keys in details) {
            update.innerHTML += "<b>"+keys[0].toUpperCase()+keys.slice(1).toLocaleLowerCase()+": </b>"+details[keys]+"<br />"
        }

        $('.datepicker').pickadate({
            selectMonths: true,
            selectYears: 15,
        });
        $(".button-collapse").sideNav();
        $(document).ready(function () {
            $('.collapsible').collapsible({
                accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
            });
        });
    </script>



</body>
</html>

Answer 1

好吧，在阅读代码、调试和谷歌搜索后，我能够解决问题。

第一件事 - Materialise Collapsible。

Clicking on collapsible header, display property of collapsible body is not changing.

因此，为元素可折叠主体添加显示属性将解决此问题。

collapsible-body{
   display: block;
}

` 第二件事 - Materialize DatePicker

On Chrome, it is not responding to mouse clicks. But, responding to space button.

因此，为了解决这个问题，我添加了一些 JQuery 代码，如下所示。

日期选择器HTML代码

<div class="input-field col s12 m6 l6">
    <label for="dob">Date of Birth:</label>
    <input id="dob" type="text" class="datepicker" />
</div>

以及触发的鼠标点击事件...

 $('.datepicker').pickadate({
      selectMonths: true,
      selectYears: 40,
      min: new Date(1990,0,1),
      max: new Date(2000,11,31),
      closeOnSelect: true,
 });
 $("#dob").click(function (event) {
      event.stopPropagation();
      $(".datepicker").first().pickadate("picker").open();
 });

在这里，您可以看到正在工作的具体化日期选择器...

$('.datepicker').pickadate({
  selectMonths: true,
  selectYears: 40,
  min: new Date(1990, 0, 1),
  max: new Date(2000, 11, 31),
  closeOnSelect: true,
});
$("#dob").click(function(event) {
  event.stopPropagation();
  $(".datepicker").first().pickadate("picker").open();
});

<head>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>

<body>
  <div class="input-field">
    <label for="dob">Date of Birth:</label>
    <input id="dob" type="date" class="datepicker" />
  </div>
</body>

Materialise CSS - 可折叠和日期输入

Materialize CSS - Collapsible & Date Input

datepicker

collapsable

materialize

material-design