默認情況下，我如何讓菜單保持原樣？

1

你應該嘗試BOOTSTRAP，我有崩潰& 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>

來源

2015-05-01 15:19:28

0

嘗試。

<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>

來源

2015-06-09 10:45:31

0

您需要的li類設置爲要崩潰

來源

2015-06-12 12:17:42 Miral

默認情況下，我如何讓菜單保持原樣？

回答

相關問題