0

我正在使用AdminLTE模板。

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

例子：

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

现在我想为每次点击更改with的style(margin-left) 。<section>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

4

1 回答 1

0

您应该使用 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不起作用的主要原因是您的项目绝对位于该部分内。由于它们是绝对定位的，因此它们不会尊重边距/填充。

于 2016-08-18T10:53:21.873 回答