时间戳

首页 > 解决方案 > 对齐Materialize CSS可水平折叠？

javascript - 对齐Materialize CSS可水平折叠？

问题描述

我试图通过水平对齐它们来更改物化 css 中的默认可折叠行为。通过使用以下代码，我获得了部分成功：

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>

但是当我单击第一个可折叠标题时，其他两个可折叠标题会下降到第一个可折叠标题的可折叠主体下方。

当我单击第二个可折叠标题时，第一个可折叠标题是固定的（很好），但第三个可折叠标题下降到第二个可折叠标题的下方。

单击最后一个可折叠标题可以正常工作（如预期的那样）。

有人可以给我一个解决方法吗？

提前致谢， 尼基尔

标签： javascriptjqueryhtmlcssmaterialize

解决方案

您必须设置position: absolute为，collapsible-body但这不是一个完美的方法，因为正如@ic3b3rg 所提到的，该组件并非设计为水平工作，因此您可以使用tabs或任何其他水平手风琴代替它。

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>

推荐阅读