HTML
CSS
JavaScript
play_arrow
HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>可扩展面板 - 通过 JavaScript 调用</title>
  <link rel="stylesheet" href="../assets/mdui-v0.4.2/css/mdui.min.css"/>
</head>
<body style="padding-top: 24px;">

<div class="mdui-container">

  <div class="mdui-row">
    <div class="mdui-col-sm-9 mdui-m-b-3">
      <div class="mdui-panel" id="panel">
        <div class="mdui-panel-item" id="item-1">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>
          </div>
        </div>
        <div class="mdui-panel-item" id="item-2">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
        <div class="mdui-panel-item" id="item-3">
          <div class="mdui-panel-item-header">Third</div>
          <div class="mdui-panel-item-body">
            <p>Third content</p>
            <p>Third content</p>
            <p>Third content</p>
            <p>Third content</p>
            <p>Third content</p>
            <p>Third content</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mdui-col-sm-3">
      <button id="open-1" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">open first</button>
      <button id="open-2" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">open second</button>
      <button id="open-3" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-3">open third</button>

      <button id="close-1" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">close first</button>
      <button id="close-2" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">close second</button>
      <button id="close-3" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-3">close third</button>

      <button id="toggle-1" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">toggle first</button>
      <button id="toggle-2" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">toggle second</button>
      <button id="toggle-3" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-3">toggle third</button>

      <button id="open-all" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">open all</button>
      <button id="close-all" class="mdui-btn mdui-color-pink-accent mdui-btn-block mdui-m-b-1">close all</button>
    </div>
  </div>


</div>

<script src="../assets/mdui-v0.4.2/js/mdui.min.js"></script>
</body>
</html>
CSS

    

    

        
JavaScript

        
var inst = new mdui.Panel('#panel');

// open
document.getElementById('open-1').addEventListener('click', function () {
  inst.open(0);
});
document.getElementById('open-2').addEventListener('click', function () {
  inst.open('#item-2');
});
document.getElementById('open-3').addEventListener('click', function () {
  inst.open(document.getElementById('item-3'));
});

// close
document.getElementById('close-1').addEventListener('click', function () {
  inst.close('#item-1');
});
document.getElementById('close-2').addEventListener('click', function () {
  inst.close(document.getElementById('item-2'));
});
document.getElementById('close-3').addEventListener('click', function () {
  inst.close(2);
});

// toggle
document.getElementById('toggle-1').addEventListener('click', function () {
  inst.toggle('#item-1');
});
document.getElementById('toggle-2').addEventListener('click', function () {
  inst.toggle('#item-2');
});
document.getElementById('toggle-3').addEventListener('click', function () {
  inst.toggle('#item-3');
});

// all
document.getElementById('open-all').addEventListener('click', function () {
  inst.openAll();
});
document.getElementById('close-all').addEventListener('click', function () {
  inst.closeAll();
});

// event
var item1 = document.getElementById('item-1');
item1.addEventListener('open.mdui.panel', function () {
  console.log('item 1 open');
});
item1.addEventListener('opened.mdui.panel', function () {
  console.log('item 1 opened');
});
item1.addEventListener('close.mdui.panel', function () {
  console.log('item 1 close');
});
item1.addEventListener('closed.mdui.panel', function () {
  console.log('item 1 closed');
});