使 div 可折叠成一个图标块

Question

我试图在达到特定屏幕宽度时让 div 折叠成一个图标。它几乎就像 Drupal 中的响应式菜单，但对于 div.

我计划使用 jQuery 和 CSS 来完成这个，除非有更优雅的方法（例如，Drupal 8 的模块可以做到这一点）。

我想知道你会怎么做，但我会post按照我的方式回答。

更新： 这些情况的主要缺点是我无法编辑 HTML...没有 jQuery。我只有我的 div，我需要通过 jQuery 插入我的触发器图标。（对于 Drupal 用户，我正在使用 Drupal 并选择一个包含两个块的区域。）

Answer 1

我的方法，还没完善，是基于以下jQuery：

var menuIcon = function() {
    if ($(window).width() < 750) {
        $(".DIV-CLASS").unwrap();
        $(".menu-icon").remove();
        $(".DIV-CLASS").children().wrapAll("<div class='menu-wrapper' />")
        $(".DIV-CLASS").prepend('//ICON HTML');
    } else {
        $(".menu-icon").remove();
    }
};

$(document).ready(function () {
    menuIcon();
});

$(window).resize(function() {
    menuIcon();
});

$('.menu-icon').click(function()
{
    $(".DIV-CLASS").toggleClass("open");
});

使 div 可折叠成一个图标块

Make div collaspible into a icon block

css

jquery

collapse