使 div 可折叠成图标块答案

【问题标题】：Make div collaspible into a icon block使 div 可折叠成图标块
【发布时间】：2017-01-05 19:59:48
【问题描述】：

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

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

我想知道你会怎么做，但我会在答案中发布我的方式。

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

【问题讨论】：

你应该在主题中发布你的想法和方法，然后问一个与之相关的具体问题。
使用@media 查询
感谢您的即时反馈。我不知道该怎么做，但是您经验丰富的开发人员会这样做的方式...与我没有经验的解决方案相比 :)

标签： jquery css collapse

【解决方案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");
});

【讨论】：

@Berdesdan 哇，太棒了！从来没有想过使用复选框。但是，这在我的场景中不起作用。如果没有 jquery，我无法重新排列或编辑我的 HTML，所以我想我不妨只使用基于 jQuery 的解决方案。