Javascript，切换按钮按类向元素添加样式
[英]Javascript, toggle-button adding style to element by class
问题描述
I'm using AdminLTE template. 
我正在使用AdminLTE模板。
There is a toggle-sidebar button which do hide and show the sidebar by adding and removing .sidebar-collapse class in the body for each click. 有一个toggle-sidebar button ，通过在每次单击时在body添加和删除.sidebar-collapse类，可以隐藏和显示sidebar 。
Example: 例：
- by default, it will be
<body class="skin-blue sidebar-mini">默认情况下，它将是<body class="skin-blue sidebar-mini"> - when the
buttonclicked once, it will be<body class="skin-blue sidebar-mini sidebar-collapse">单击一次button后，将为<body class="skin-blue sidebar-mini sidebar-collapse"> - when the
buttonclicked again, it will back to<body class="skin-blue sidebar-mini">当再次单击该button时，它将返回到<body class="skin-blue sidebar-mini">
Now I want to change the style (margin-left) of <section> with class="content" for each toggle-sidebar clicked. 现在，我想为单击的每个toggle-sidebar使用class="content"更改<section>的style （左空白）。
Example: 例：
- by default, it will be
<body class="skin-blue sidebar-mini">and<section class="content" style="margin-left:-200px;margin-top:-40px">默认情况下，它将是<body class="skin-blue sidebar-mini">和<section class="content" style="margin-left:-200px;margin-top:-40px"> - when the
buttonclicked once, it will be<body class="skin-blue sidebar-mini sidebar-collapse">and<section class="content" style="margin-left:-380px;margin-top:-40px">单击一次button后，将为<body class="skin-blue sidebar-mini sidebar-collapse">和<section class="content" style="margin-left:-380px;margin-top:-40px"> - when the
buttonclicked again, it will back to<body class="skin-blue sidebar-mini">and<section class="content" style="margin-left:-200px;margin-top:-40px">当再次单击该button时，它将返回到<body class="skin-blue sidebar-mini">和<section class="content" style="margin-left:-200px;margin-top:-40px">
the code: 编码：
$.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")
}
}
Please tell me if my question is confusing. 请告诉我我的问题是否令人困惑。 I honestly don't understand the code, all the code above is provided by AdminLTE 老实说我不懂代码，上面的所有代码都是由AdminLTE提供的
1 个解决方案
解决方案1
0 已采纳 2016-08-18 10:53:21
You should use css for your styling. 您应该使用css作为样式。 That way you don't need to modify any of your javascript code. 这样，您无需修改任何JavaScript代码。
/* Sidebar open state */
.content {
margin-left: -200px;
margin-top: -40px;
}
/* Sidebar collapsed state */
.sidebar-collapse .content {
margin-left: -380px;
}
The code above is the answer to the original question. 上面的代码是原始问题的答案。 The following code is what you need to do what you actually want it to do. 以下代码是您实际需要执行的操作。
/* Sidebar open state */
.content {
left: 400px;
position: absolute;
}
/* Sidebar collapsed state */
.sidebar-collapse .content {
left: 250px;
}
There are other possible solutions, but the main reason that margin-left doesn't work is because you have items absolutely positioned inside the section. 还有其他可能的解决方案，但是“ margin-left不起作用”的主要原因是因为您将项目绝对定位在该区域内。 Since they are absolutely positioned, they won't respect margin/padding. 由于它们的位置绝对正确，因此它们将不遵守边距/填充。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.