Question

重点是，如何将菜单设置为默认折叠？

感谢。

Answer 1

你应该尝试 BOOTSTRAP ，我有崩溃的示例＆amp; Uncollapse ...

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
       Lorem ipsum [1st menu]....
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
              Lorem ipsum [2nd menu]....
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      Lorem ipsum [3rd menu]....
      </div>
    </div>
  </div>
</div>

Answer 2

试试这个。

＆＃13;

<html lang="en">
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="description" content="">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- Start Header Section -->
    <main>
        <div class="container">
            <ul class="collapsible" data-collapsible="accordion">
                <li class="main">
                    <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
                    <div class="collapsible-body">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
                    <div class="collapsible-body">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
                    <div class="collapsible-body">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
            </ul>
        </div>
    </main>
    <!--Import jQuery before materialize.js-->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
    <script>
    $(document).ready(function() {

        $('.collapsible').collapsible({
            accordion: true // A setting that changes the collapsible behavior to expandable instead of the default accordion style
        });

        $('.main').addClass('active');
        $('.main .collapsible-header').addClass('active');
        $('.main .collapsible-body').css('display', 'block');


    });
    </script>
</body>

</html>

＆＃13;

Answer 3

您需要将li班级设为active，然后将其展开

Answer 4

设置类-处于活动状态-位于可折叠标题中

<li>
   <div className="collapsible-header active">
    <i className="material-icons">filter_drama</i>First
   </div>
   <div className="collapsible-body"><span>Lorem ipsum dolor sit amet.</span>
   </div>
</li>

如何在Materialize中默认保持菜单拼写？

4 个答案: