Question

我正在使用AdminLTE模板。

有一个toggle-sidebar button会隐藏并显示sidebar，只需在每次点击.sidebar-collapse中添加和删除body课程。

示例：

默认情况下，它将是<body class="skin-blue sidebar-mini">
当button点击一次时，它将是<body class="skin-blue sidebar-mini sidebar-collapse">
再次点击button时，它将返回<body class="skin-blue sidebar-mini">

现在，我想针对style点击<section>，更改class="content" toggle-sidebar的{{1}}（左边距）。

示例：

默认情况下，它会是<body class="skin-blue sidebar-mini">和<section class="content" style="margin-left:-200px;margin-top:-40px">
当button点击一次时，它将是<body class="skin-blue sidebar-mini sidebar-collapse">和<section class="content" style="margin-left:-380px;margin-top:-40px">
再次点击button时，它会返回<body class="skin-blue sidebar-mini">和<section class="content" style="margin-left:-200px;margin-top:-40px">

代码：

$.AdminLTE.pushMenu = {
    activate: function(a) {
        var b = $.AdminLTE.options.screenSizes;
        $(document).on("click", a, function(a) {
            a.preventDefault(), $(window).width() > b.sm - 1 ? $("body").hasClass("sidebar-collapse") ? $("body").removeClass("sidebar-collapse").trigger("expanded.pushMenu") : $("body").addClass("sidebar-collapse").trigger("collapsed.pushMenu") : $("body").hasClass("sidebar-open") ? $("body").removeClass("sidebar-open").removeClass("sidebar-collapse").trigger("collapsed.pushMenu") : $("body").addClass("sidebar-open").trigger("expanded.pushMenu")
        }), $(".content-wrapper").click(function() {
            $(window).width() <= b.sm - 1 && $("body").hasClass("sidebar-open") && $("body").removeClass("sidebar-open")
        }), ($.AdminLTE.options.sidebarExpandOnHover || $("body").hasClass("fixed") && $("body").hasClass("sidebar-mini")) && this.expandOnHover()
    },
    expandOnHover: function() {
        var a = this,
            b = $.AdminLTE.options.screenSizes.sm - 1;
        $(".main-sidebar").hover(function() {
            $("body").hasClass("sidebar-mini") && $("body").hasClass("sidebar-collapse") && $(window).width() > b && a.expand()
        }, function() {
            $("body").hasClass("sidebar-mini") && $("body").hasClass("sidebar-expanded-on-hover") && $(window).width() > b && a.collapse()
        })
    },
    expand: function() {
        $("body").removeClass("sidebar-collapse").addClass("sidebar-expanded-on-hover")
    },
    collapse: function() {
        $("body").hasClass("sidebar-expanded-on-hover") && $("body").removeClass("sidebar-expanded-on-hover").addClass("sidebar-collapse")
    }
}

请告诉我，我的问题是否令人困惑。老实说，我不理解代码，上面的所有代码都是由AdminLTE

提供的

Answer 1

您应该使用css进行样式设计。这样您就不需要修改任何JavaScript代码了。

/* Sidebar open state */
.content {
   margin-left: -200px;
   margin-top: -40px;
}

/* Sidebar collapsed state */
.sidebar-collapse .content {
   margin-left: -380px;
}

上面的代码是原始问题的答案。以下代码是您实际需要执行的操作。

/* Sidebar open state */
.content {
   left: 400px;
   position: absolute;
}

/* Sidebar collapsed state */
.sidebar-collapse .content {
   left: 250px;
}

还有其他可能的解决方案，但margin-left不起作用的主要原因是因为您的项目绝对位于该部分内。由于它们是绝对定位的，因此它们不会尊重边距/填充。

Javascript，toggle-button按类添加样式

1 个答案: