HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>可扩展面板 - 通过 JavaScript 调用</title>
  <link rel="stylesheet" href="https://cdn.w3cbus.com/library/mdui/1.0.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="https://cdn.w3cbus.com/library/mdui/1.0.2/js/mdui.min.js"></script>
</body>
</html>
CSS

  

  

    
JavaScript

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

// open
$('#open-1').on('click', function () {
  inst.open(0);
});

$('#open-2').on('click', function () {
  inst.open('#item-2');
});

$('#open-3').on('click', function () {
  inst.open($('#item-3'));
});

// close
$('#close-1').on('click', function () {
  inst.close('#item-1');
});

$('#close-2').on('click', function () {
  inst.close($('#item-2'));
});

$('#close-3').on('click', function () {
  inst.close(2);
});

// toggle
$('#toggle-1').on('click', function () {
  inst.toggle('#item-1');
});

$('#toggle-2').on('click', function () {
  inst.toggle('#item-2');
});

$('#toggle-3').on('click', function () {
  inst.toggle('#item-3');
});

// all
$('#open-all').on('click', function () {
  inst.openAll();
});

$('#close-all').on('click', function () {
  inst.closeAll();
});

// event
$('#item-1').on('open.mdui.panel', function () {
  console.log('item 1 open');
});

$('#item-1').on('opened.mdui.panel', function () {
  console.log('item 1 opened');
});

$('#item-1').on('close.mdui.panel', function () {
  console.log('item 1 close');
});

$('#item-1').on('closed.mdui.panel', function () {
  console.log('item 1 closed');
});