Question

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

我打算使用jQuery和CSS来实现这一目标，除非有更优雅的方式，（例如Drupal 8的模块可以做到这一点）。

我想知道你会怎么做，但我会在答案中发表意见。

UPDATE：这些情况的主要缺点我无法编辑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 collaspible变成图标块

1 个答案: