Question

我正在使用MaterializeCSS框架，并且希望将复选框放入可折叠主体中，然后出现一个问题，我的复选框不在此处显示我的代码，希望社区为我提供帮助

<ul class="collapsible">
 <li>
  <div class="collapsible-header"><i class="materialicons">filter_drama</i>First</div>
  <div class="collapsible-body">
   <label>
    <input type="checkbox" />
    <span>Red</span>
   </label>
  </div>
 </li>
 <li>
  <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
  <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
 </li>
 <li>
  <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
  <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
 </li>
</ul>

Answer 1

这是工作中的演示

 $(document).ready(function(){
    $('.collapsible').collapsible();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
            
          <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body">
        <label>
        <input type="checkbox" />
        <span>Red</span>
      </label>
      </div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

在可折叠内部实现CSS复选框

1 个答案: