Question

输出是：

Test1（可折叠下拉菜单） T1 T2 T3 Test2（可折叠下拉菜单） B1 B2 B3 Test3（可折叠下拉菜单） C1 C2

期望的输出：

       Test1(Collapsable Dropdown)
           T1
           T2
           T3
      
       Demo1(Collapsable Dropdown)
           Test2(Collapsable Dropdown)
               B1
               B2
               B3
           Test3(Collapsable Dropdown)
               C1
               C2

Answer 1

最简单的方法是导入JQuery。这是根据您的要求编码的代码示例。检查一切是否匹配。您可以使用 class/id 和 CSS 来更改它的外观。希望这能解决您的问题。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>Test 1</h1>
      <p>T1</p>
      <p>T1</p>
      <p>T3</p>
    </div>
    <div data-role="collapsible">
      <h1>Demo 1</h1>
          <div data-role="collapsible">
              <h1>Test 2</h1>
              <p>B1</p>
              <p>B2</p>
              <p>B3</p>
          </div>
         <div data-role="collapsible">
              <h1>Test 3</h1>
              <p>C1</p>
              <p>C2</p>
          </div>
    </div>
  </div>
</body>
</html>

可折叠下拉菜单的 HTML 标签

1 个答案: