Javascript，切換按鈕按類添加樣式到元素

我使用AdminLTE模板。Javascript，切換按鈕按類添加樣式到元素

有一個toggle-sidebar button隱藏和顯示sidebar通過添加和刪除body中的.sidebar-collapse類每次點擊。

例子：

在默認情況下，這將是<body class="skin-blue sidebar-mini">
當button點擊一次，這將是<body class="skin-blue sidebar-mini sidebar-collapse">
當button再次點擊，它會回<body class="skin-blue sidebar-mini">

現在我想要將style（margin-left）<section>更改爲01點擊了每個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">

c Ode：

$.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提供的

來源

2016-08-18 Eternity Neet

您的示例中的樣式是直接放置在該部分上的，還是隻是將其放置在該示例中？ – rdubya

我希望它是這樣的（例子） –

你應該使用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-18 10:53:21 rdubya

嘗試過，但它不工作，更確切地說'側邊欄打開狀態'的邊距是有效的，但'摺疊狀態'不起作用 –

@EternityNeet你可以添加一個你的html結構樣本和你試圖解決你問題的CSS嗎？根據你現在的內容，我無法分辨選擇器不起作用的原因。 – rdubya

@EternityNeet有什麼好運氣？ – rdubya

Javascript，切換按鈕按類添加樣式到元素

回答

相關問題