Question

我正在尝试使用materialize创建一个表，允许每个表行可单击。单击一行应展开包含更多行数据的行下的手风琴。我似乎无法将手风琴打开或将整体设置为手风琴的标题。我已经尝试将类直接添加到tr中，并将每个tr包装在div中。两种方案都没有给出正确的行为这是我目前的代码：

    <script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>

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

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

  <script type="text/javascript"> 
    $('.collapsible').collapsible({
       accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
     });
   </script>
<table class="bordered">
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>

  <tbody>
    <tr class="collapsible" data-collapsible="accordion">
        <td class="collapsible-header">Alvin</td>
        <div class="collapsible-body">
          <p>
            hello
          </p>
        </div>
        <td>Eclair</td>
        <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Jonathan</td>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>

Answer 1

需要在import tkinter as tk class Passwordchecker(tk.Frame): def __init__(self, parent): tk.Frame.__init__(self, parent) self.parent = parent self.initialize_user_interface() def initialize_user_interface(self): self.parent.geometry("200x200") self.parent.title("Password checker") self.entry=tk.Entry(self.parent) self.entry.pack() self.button=tk.Button(self.parent,text="Enter", command=self.PassCheck) self.button.pack() self.label=tk.Label(self.parent,text="Please a password") self.label.pack() def PassCheck(self): password = self.entry.get() if len(password)>=9 and len(password)<=12: self.label.config(text="Password is correct") else: self.label.config(text="Password is incorrect") if __name__ == '__main__': root = tk.Tk() run = Passwordchecker(root) root.mainloop()元素上配置Materialize Collapsible。

试试这个：

li

布局不太好，但按预期工作。如果您仅对<table class="bordered"> <thead> <tr> <th data-field="id">Name</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> <tbody> <tr> <td class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header">Alvin</div> <div class="collapsible-body"> <p> hello </p> </div> </li> </td> <td>Eclair</td> <td>$0.87</td> </tr> <tr> <td>Alan</td> <td>Jellybean</td> <td>$3.76</td> </tr> <tr> <td>Jonathan</td> <td>Lollipop</td> <td>$7.00</td> </tr> </tbody> </table>使用Materialize，建议您使用其他组件，例如Bootstrap Collapse

materialize：make table row accordion header

1 个答案: