如何在外部单击(adminlte)上关闭控制侧栏类

Question

<aside class="control-sidebar control-sidebar-dark">
 ......
</aside>

我已经通过添加侧边栏折叠尝试了这一点。但这不起作用。

Answer 1

       <aside id="cust_sidebar" class="control-sidebar control-sidebar-dark">
        ......
      </aside>


    <script>
        $('.content-wrapper').click(function (e) {
            var get_class = $("#cust_sidebar").attr('class');       
            console.log(get_mini);
            if (get_class == "control-sidebar control-sidebar-dark control-sidebar-open") {
                $('#cust_sidebar').removeClass('control-sidebar-open');
            }               
        })
    </script>

Answer 2

进一步简化@charlie的答案，如果您主题(皮肤(控制侧栏，则不会破裂：

html

<aside id="control_sidebar" class="control-sidebar control-sidebar-dark">
    ......
</aside>

js(jquery(

    $(".content-wrapper").click(function() {
        if ($("#control_sidebar").hasClass("control-sidebar-open")) {
            $("#control_sidebar").removeClass("control-sidebar-open");
        }
    });

Answer 3

您可以使用jQuery切换一边。由于您已经使用了Adminlte，因此它具有侧栏切换的内置操作。检查jQuery和app.min.js参考。由于文件参考无效，可能是不起作用的。

以下是使用切换函数的另一种方法。

var master = $('[data-name="master"]'),
  side = $('[data-name="side"]');
$('.toggle', master).on('click', function() {
  master.toggleClass('slide');
  side.toggleClass('pop');
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  font: normal 14px/1.4em Helvetica, sans-serif;
}
p {
  margin-top: .5em;
}
[role="main"] {
  width: inherit;
  height: inherit;
  background: rgba(245, 245, 245, 1)
}
[data-name="side"] {
  position: absolute;
  width: 14.28571428571429em;
  height: inherit;
  padding: 1em;
  background: rgb(50, 50, 50);
}
[data-name="side"] ul {
  -webkit-transition: all 200ms linear;
  -webkit-transform: scale(.8, .8);
}
[data-name="side"].pop ul {
  -webkit-transform: scale(1, 1);
}
[data-name="side"] li {
  color: rgb(240, 240, 240);
  padding: .5em .5em .6em .5em;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .8);
}
[data-name="side"] li:first-child {
  border-top: none;
}
[data-name="side"] li:last-child {
  border-bottom: none;
}
[data-name="master"] {
  position: relative;
  padding: 1em;
  height: inherit;
  background: inherit;
  box-shadow: -1px 0 1px -1px rgba(0, 0, 0, .3);
  -webkit-transition: all 200ms ease-in-out;
  overflow: hidden;
}
[data-name="master"].slide {
  left: 14.28571428571429em;
}
[data-name="master"].slide .toggle {
  -webkit-transform: translateX(-1.2em);
}
.toggle {
  font-size: 1.3em;
  -webkit-transition: all 100ms 200ms;
  -webkit-transform: translateX(-15px);
}
.toggle:before {
  position: relative;
  content: '2630';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div role="main">
  <aside data-name="side">
    <ul>
      <li>Menu Item</li>
      <li>Additional</li>
      <li>Here's Another</li>
      <li>More Here</li>
      <li>One Final</li>
    </ul>
  </aside>
  <section data-name="master">
    <div class="toggle"></div>
    <p>AdminLTE is a popular open source WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3. It utilizes all of the Bootstrap components in its design and re-styles many
      commonly used plugins to create a consistent design that can be used as a user interface for backend applications. AdminLTE is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through
      installing the template and exploring the various components that are bundled with the template.</p>
  </section>
</div>

update

使用以下代码

$('div').click(function(e) {
   master.toggleClass('slide');
  side.toggleClass('pop');
})

u可以将DIV更改为您想要的任何元素。

Answer 4

我面临同样的问题。解决者：

$(".content-wrapper").click(function() {
    //console.log('test click');
    $("#control_sidebar").ControlSidebar('collapse');
    
});
<aside id="control_sidebar" class="control-sidebar control-sidebar-light" ....
</aside>