d2l.ai隐藏侧栏

Greasy Fork is available in English.

d2l.ai隐藏侧栏

d2l.ai添加隐藏侧栏按钮

目前为 2023-04-01 提交的版本。查看最新版本。

换行

// ==UserScript==
// @name         d2l.ai隐藏侧栏
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  d2l.ai添加隐藏侧栏按钮
// @author       You
// @match        https://zh.d2l.ai/chapter_introduction/index.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=d2l.ai
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    // 获取元素
const drawer = document.querySelector('.mdl-layout__drawer');
const main = document.querySelector('.mdl-layout__content');
const doc = document.documentElement;

// 创建按钮
const btn = document.createElement('button');
btn.classList.add('mdl-button', 'mdl-js-button', 'mdl-js-ripple-effect');
btn.textContent = '隐藏侧边';

// 按钮点击事件处理函数
function toggleDrawer() {
  if (drawer.style.display === 'none') {
    // 显示侧边栏
    drawer.style.display = '';
    main.style.marginLeft = '256px';
    btn.textContent = '隐藏侧边';
    doc.style.width = '';
  } else {
    // 隐藏侧边栏
    drawer.style.display = 'none';
    main.style.marginLeft = '50px';
    btn.textContent = '显示侧边';
    doc.style.width = '100vw';
  }
}

// 添加按钮到导航元素中
const nav = document.querySelector('.mdl-navigation');
nav.appendChild(btn);

// 绑定按钮点击事件
btn.addEventListener('click', toggleDrawer);

})();