Javascript、トグルボタンでクラスに要素を追加スタイル

私はAdminLTEテンプレートを使用しています。Javascript、トグルボタンでクラスに要素を追加スタイル

bodyに.sidebar-collapseクラスを追加して削除することで、sidebarを非表示にして表示するtoggle-sidebar buttonがあります。

例：デフォルトで

、それはbuttonが一度クリックされたとき、それはbuttonが再びクリックされたとき、それは<body class="skin-blue sidebar-mini">

に戻ります <body class="skin-blue sidebar-mini sidebar-collapse">

なります<body class="skin-blue sidebar-mini">

になります

style（margin-left）を<section>から01に変更したいそれぞれについてtoggle-sidebarがクリックされました。

例：デフォルトで

、それはbuttonが一度クリックされたとき、それはbuttonが再びクリックされたとき、それは<body class="skin-blue sidebar-mini">に戻ります<body class="skin-blue sidebar-mini sidebar-collapse">と<section class="content" style="margin-left:-380px;margin-top:-40px">
なり<body class="skin-blue sidebar-mini">と<section class="content" style="margin-left:-200px;margin-top:-40px">
になりますおよび<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 any luck？ – rdubya

Javascript、トグルボタンでクラスに要素を追加スタイル

答えて

関連する問題