Javascript, toggle-button按类为元素添加样式

Javascript, toggle-button adding style to element by class

本文关键字：元素 添加 样式 toggle-button Javascript      更新时间：2023-09-26

我使用的是AdminLTE模板。

有一个toggle-sidebar button，通过在body中添加和删除.sidebar-collapse类来隐藏和显示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
提供的

你应该使用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不起作用的主要原因是因为您的项目绝对位于section内。因为它们是绝对定位的，所以它们不会考虑margin/padding

相关文章：