Javascript，通过 class 向元素添加样式的切换按钮

Question

我正在使用 AdminLTE 模板。

有一个 toggle-sidebar button 通过在每次点击时在 body 中添加和删除 .sidebar-collapse class 来隐藏和显示 sidebar。

示例：

默认为<body class="skin-blue sidebar-mini">
当button点击一次，就会<body class="skin-blue sidebar-mini sidebar-collapse">
当button再次点击时，会回到<body class="skin-blue sidebar-mini">

现在我想将 <section> 的 style（左边距）更改为 class="content"，每次 toggle-sidebar 单击。

示例：

默认为<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 不起作用的主要原因是您将项目绝对定位在该部分内。由于它们是绝对定位的，因此它们不会尊重 margin/padding.

Javascript，通过 class 向元素添加样式的切换按钮

Javascript, toggle-button adding style to element by class

javascript

html

css

adminlte